网页选项卡的应用

(1)功能描述:

  在页面中,设置三个不同名称的选项卡,当单机某个选项卡时,下面相对应的区域显示其内容信息,同时选项卡的背景色与内容信息的背景色浑然一体,并且字体加粗,表示出于选中状态。

(2)实现代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>网页选项卡应用</title>
 5     <script type="text/javascript" src="Jscript/jquery-1.4.2.js"></script>
 6     <style type="text/css">
 7            body{font-size:13px}
 8            ul,li {margin:0;padding:0;list-style:none}
 9            #menu li {text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
10            #menu li.tabFocus {width:50px; font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
11            #content {width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
12            #content li{display:none}
13            #content li.conFocus{display:block}
14     </style>
15     <script type="text/javascript">
16         $(function() {
17             $("#menu li").each(function(index) { //带参数遍历各个选项卡
18                 $(this).click(function() { //注册每个选卡的单击事件
19                     $("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
20                     $(this).addClass("tabFocus"); //增加当前选中项的样式
21                     //显示选项卡对应的内容并隐藏未被选中的内容
22                     $("#content li:eq(" + index + ")").show()
23                     .siblings().hide();
24                 });
25             });
26         })
27     </script>
28 </head>
29 <body>
30      <ul id="menu">
31          <li class="tabFocus">家居</li>
32          <li>电器</li>
33          <li>二手</li>
34      </ul>
35      <ul id="content">
36          <li class="conFocus">我是家居的内容</li>
37          <li>欢迎您来到电器城</li>
38          <li>二手市场,产品丰富多彩</li>
39      </ul>
40 </body>
41 </html>

结果如下图所示:

转载于:https://www.cnblogs.com/baixc/p/3393372.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/273966.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工欲善其事必先利其器系列之:在VS里面折叠js代码

之前用vs写js的时候经常因为js代码过长而且不能像cs文件里面的方法一样进行折叠而抓狂,直到在扩展库发现了这款插件有了它就可以把代码进行折叠了 插件地址转载于:https://www.cnblogs.com/Chendaqian/p/3396702.html

python- 基础 map方法

python中map()函数 map()是 Python 内置的高阶函数&#xff0c;它接收一个函数 f 和一个 list&#xff0c;并通过把函数 f 依次作用在 list 的每个元素上&#xff0c;得到一个新的 list 并返回。 例如&#xff0c;对于list [1, 2, 3, 4, 5, 6, 7, 8, 9] 如果希望把list的每个…

C算法编程题(二)正螺旋

前言 上一篇《C算法编程题&#xff08;一&#xff09;扑克牌发牌》 写东西前总是喜欢吐槽一些东西&#xff0c;还是多啰嗦几句吧&#xff0c;早上看了一篇博文《谈谈外企涨工资那些事》&#xff0c;里面楼主讲到外企公司包含的五类人&#xff0c;其实不只是外企如此&#xff0c…

scrapy框架-post使用

scrapy中使用FormRequest向网页提交数据 Scrapy post使用 如何post data&#xff1a; http://httpbin.org/post FormRequest : post请求 GitHub Login 借助浏览器分析登陆行为。 分析post的内容先尝试一次错误的登陆&#xff1a;如下&#xff1a;分析&#xff1a;需要post…

Oracle行列转换小结

目录结构如下&#xff1a;行转列列转行[一]、行转列 1.1、初始测试数据 表结构&#xff1a;TEST_TB_GRADE Sql代码 create table TEST_TB_GRADE ( ID NUMBER(10) not null, USER_NAME VARCHAR2(20 CHAR), COURSE VARCHAR2(20 CHAR), SCORE FLOAT ) 初始…

python- 进阶 与flask的搭配使用---定时任务框架APScheduler学习详解

APScheduler简介 在平常的工作中几乎有一半的功能模块都需要定时任务来推动&#xff0c;例如项目中有一个定时统计程序&#xff0c;定时爬出网站的URL程序&#xff0c;定时检测钓鱼网站的程序等等&#xff0c;都涉及到了关于定时任务的问题&#xff0c;第一时间想到的是利用ti…

Mingw下g++编译执行顺序错误

今天写一个简单的线性表时&#xff0c;用Mingw中的g编译、调试、运行时发现一个奇怪的现象&#xff1a;程序的执行顺序与实际编写顺序不一致。 编译环境&#xff1a;代码编写 win7下 editplus Mingw 4.3.3 g 代码片段如下&#xff1a; 1 //function: create a list 2 //ti…

HDTV(1920x1080)码率和视频质量关系的研究 2 (实验结果)

上一篇文章中介绍了实验的准备工作&#xff0c; HDTV&#xff08;1920x1080&#xff09;码率和视频质量关系的研究 1 &#xff08;前期准备&#xff09; 本文介绍一下实验的结果。 首先来看一下主观评价的试验结果&#xff1a; 从实验结果来看&#xff0c;可以得出以下结论&…

NGUI如何创建自己的精灵图集

说实话其实很简单,但是在不知道的情况下真的不好弄啊. 1. 选择你要制作精灵图集的图片,可以选择多张 2. 提倡使用快捷键Alt Shift M 会有如下窗口弹出,也可以NGUI --> Open-->Atlas Maker打开 我们看到在Sprites里面就是我们选择的要制作图集的图片 当在Replace后面的输…

VMware虚拟机与宿主无法复制的解决办法

由于工作需要&#xff0c;上网机器使用虚拟机&#xff0c;因此需要经常来回的拷贝文件&#xff0c;而vmware从6.5一直走来到10.0.1&#xff0c;总是有一个问题很让人苦恼---共享粘贴板总是会无故失效。经常实验&#xff0c;发现可以经过以下方法临时解决一下&#xff0c;虽然不…

我感觉我恰似一个呆逼

TicTacToe V2.0。 非要用1-9来输入的结果就是使用二维数组这件事的意义变得非常难找。 留个遗体&#xff0c;我要改回坐标输入了。 1 public class Game {2 String chessBoard;3 String[][] pieces new String[3][3];4 5 /** 初始化棋盘样式和棋子数组。*/6 …

[企业化NET]Window Server 2008 R2[3]-SVN 服务端 和 客户端 基本使用

1. 服务器基本安装即问题解决记录 √ 2. SVN环境搭建和客户端使用 2.1 服务端 和 客户端 安装 √ 2.2 项目建立与基本使用 √ 2.3 基本冲突解决,并版&#xff0c;tags 3. 数据库安装 4. 邮件服务器搭建 5. JIRA环境搭建和使用 6. CC.NET项目持续发布工具…

关于 mysql.test 数据库

国内私募机构九鼎控股打造APP&#xff0c;来就送 20元现金领取地址&#xff1a;http://jdb.jiudingcapital.com/phone.html内部邀请码&#xff1a;C8E245J &#xff08;不写邀请码&#xff0c;没有现金送&#xff09;国内私募机构九鼎控股打造&#xff0c;九鼎投资是在全国股份…

Python中strip()、lstrip()、rstrip()用法详解

Python中strip()、lstrip()、rstrip()用法详解 Python中有三个去除头尾字符、空白符的函数&#xff0c;它们依次为: strip&#xff1a; 用来去除头尾字符、空白符(包括\n、\r、\t、 &#xff0c;即&#xff1a;换行、回车、制表符、空格) lstrip&#xff1a;用来去除开头字符、…

HDU 4121 Xiangqi 模拟题

题目&#xff1a; http://acm.hdu.edu.cn/showproblem.php?pid4121 首先对标题赞一个&#xff0c;非要叫 “Xiangqi” 而不是 ”中国象棋“ 或者 ”Chinese chess“ 。。 然后是题意&#xff1a;黑棋只剩下一个”将“了&#xff0c;红棋各种 ”车” “马” “炮“&#xff0c;…

Python3的方法解析顺序(MRO)

Python 2.3 的新式类的 C3 算法。它也是 Python 3 唯一支持的方式(笔者使用python3&#xff0c;所以就先讲这种的) 一个例子&#xff1a; class D(object): pass class E(object): pass class F(object): pass class C(D, F): pass class B(E, D): …

WPF 用 DataTemplate 合并DataGrid列表列头类似报表设计及行头列头样式 - 学习

WPF中 DataGrid 列头合并&#xff0c;类似于报表设计。效果图如下↓ 1.新建一个WPF项目WpfApplication1&#xff0c;新建一个窗体DataGridTest&#xff0c;前台代码如下&#xff1a; <Window x:Class"WpfApplication1.DataGridTest" xmlns"http://sch…

他山之石,可以攻玉——来自亚马逊的电商启示录

题记&#xff1a;“创新是我们的DNA&#xff0c;技术是我们改善客户体验的基础2009 年致股东的信” 1. 从亚马逊的成功讲起 1.1 历经8 年亏损始成正果 它是世界上所有电商的龙头和楷模&#xff0c;是毫无争议的行业标杆和旗帜&#xff0c;它在战略和经营上的一举一动都是关注的…

Jar 打包 EXE文件,可以脱离java环境运行 Jsmooth的使用

1、首先准备我们的资源&#xff0c;把要转换的Jar文件、精简过的JRE文件夹和想生成的EXE文件的图标&#xff08;可以是png&#xff0c;jpg等格式&#xff0c;不想加图标可以不弄&#xff09;放到同一个文件夹内。这一步一定要做&#xff0c;否则可以成功生成&#xff0c;但在没…

linux中的fork方法(python)

前言&#xff1a; Unix/Linux操作系统提供了一个fork()系统调用&#xff0c;它非常特殊。普通的函数调用&#xff0c;调用一次&#xff0c;返回一次&#xff0c;但是fork()调用一次&#xff0c;返回两次&#xff0c;因为操作系统自动把当前进程&#xff08;称为父进程&#xf…