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

jQuery-切换2的更多相关文章

  1. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  2. jquery切换tab标签例子

    之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下 代码其实很简单,首先先把代码分享给大家,代码如下 var shoptoggle = $('.shoptoggle .shop ...

  3. jQuery切换网页皮肤并保存到Cookie示例代码

    经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. jQuery切换事件

    有html页面内容如下: <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1" ...

  5. jquery切换

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> < ...

  6. jQuery 切换图片（图标）效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery——切换toggle

    toggle()-----显示隐藏 toggleClass-------添加类或者删除类 <!DOCTYPE html> <html lang="en"> ...

  8. jquery切换class

    <ul class="nva_sele_txt" id="">            <a href="#" class= ...

  9. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  10. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

随机推荐

  1. lsof and dynamic array in bash/shell

    https://unix.stackexchange.com/questions/171519/lsof-warning-cant-stat-fuse-gvfsd-fuse-file-system F ...

  2. dyld环境变量

    苹果APP启动,分为两个过程:系统dylib动态链接库 app的main函数启动过程. main函数过程直接对iOS开发者.这里备忘的dylib过程: 一.dyld加载到虚拟内存     1. loa ...

  3. LeetCode 965 Univalued Binary Tree 解题报告

    题目要求 A binary tree is univalued if every node in the tree has the same value. Return true if and onl ...

  4. Pandas之Dateframe 实现Excel读取与写入

    目的:有时需对数据进行到出到Excel,直观的给别人参阅,或从Excel中读取数据进行操作和分析依赖库 pandas 可简单的读出和写入 1,根据Excel读取( 需安装xlrd库) import n ...

  5. jQuery -- 监听input、textarea输入框值变化

    $('textarea').bind('input propertychange', function(){ if($(".textareachange").val() != &q ...

  6. $(document).ready()方法和window.onload有什么区别？

    ①.window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的: ②.$(document).ready()方法可以在DOM载入就绪时就对其进行操纵,并调 ...

  7. 【托业】【新托业TOEIC新题型真题】学习笔记3-题库二->P5-6

    --------------------------------------单词-------------------------------------- oppose vt. 反对:对抗,抗争 v ...

  8. discuz优化10个小技巧

    Discuz论坛是国内使用最多的论坛系统,现在最新版为X 3.4,X3.4 从 2018 年 1 月 1 日起只在官方 Git 发布,地址:https://gitee.com/ComsenzDiscu ...

  9. 4 jmeter badboy脚本开发技术详解

    badboy中的检查点 以www.sogou.com搜索为例演示,搜索badboy. 1.打开badboy工具,点击红色按钮开始录制,在地址栏目中输入地址:www.sogou.com,回车. 2.输入 ...

  10. c# ThreadPool 判断子线程全部执行完毕的四种方法

    1.先来看看这个 多线程编程 多线程用于数据采集时,速度明显很快,下面是基本方法,把那个auto写成采集数据方法即可. using System; using System.Collections.G ...