<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>网页选项卡应用</title>

     <script type="text/javascript"

             src="Jscript/jquery-1.8.2.min.js">

     </script>

     <style type="text/css">

            body{font-size:13px}

            ul,li {margin:0;padding:0;list-style:none}

            #menu li {text-align:center;float:left;padding:5px;

                      margin-right:2px;width:50px;cursor:pointer}

            #menu li.tabFocus {width:50px; font-weight:bold;

                            background-color:#f3f2e7;border:solid 1px #666;

                            border-bottom:0;z-index:100;position:relative}

            #content {width:260px;height:80px;padding:10px;

                      background-color:#f3f2e7;clear:left;

                      border:solid 1px #666;position:relative;top:-1px}

            #content li{display:none}

            #content li.conFocus{display:block}

     </style>

     <script type="text/javascript">

         $(function() {

             $("#menu li").each(function(index) { //带参数遍历各个选项卡

                 $(this).click(function() { //注册每个选卡的单击事件

                     $("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式

                     $(this).addClass("tabFocus"); //增加当前选中项的样式

                     //显示选项卡对应的内容并隐藏未被选中的内容

                     $("#content li:eq(" + index + ")").show()

                     .siblings().hide();

                 });

             });

         })

     </script>

 </head>

 <body>

      <ul id="menu">

          <li class="tabFocus">家居</li>

          <li>电器</li>

          <li>二手</li>

      </ul>

      <ul id="content">

          <li class="conFocus">我是家居的内容</li>

          <li>欢迎您来到电器城</li>

          <li>二手市场，产品丰富多彩</li>

      </ul>

 </body>

 </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. LU decomposition can be viewed as the matrix form of Gaussian elimination.

    https://en.wikipedia.org/wiki/LU_decomposition One way to find the LU decomposition of this simple m ...

  2. Concurrent Execution

    Concurrent Execution — Python 3.7.2 documentation https://docs.python.org/3/library/concurrency.html

  3. Only the storage referenced by ptr is modified. No other storage locations are accessed by the call.

    free - C++ Reference http://www.cplusplus.com/reference/cstdlib/free/ Data races Only the storage re ...

  4. 中位数&贪心

    谁能想到基本算法就这么难呢?我想去冲省选,但是迟迟在这些地方 花时间 算是提升自己的思维算了. 这道题呢 答案其实很简单每个数在a的位置和在b的位置之差的累加/2即是答案为什么呢?考虑当前数字 要向后 ...

  5. C++生成静态库

    //StaticMath.h #include <iostream> class StaticMath { public: //StaticMath(void); //~StaticMat ...

  6. LeetCode 461 Hamming Distance 解题报告

    题目要求 The Hamming distance between two integers is the number of positions at which the corresponding ...

  7. 2018/05/07 Linux find命令中{}的作用

    首先抛出一个问题,如果你在文件中建立了一个 -a.txt 的文件,你会怎么删除它? 我之前的回答是 rm -a.txt 实验结果很明显,不能删除. 因为在 Linux 下,会把 -a.txt 前面的 ...

  8. Master-Worker集群计算demo

    Task为要执行的任务实体类: package com.viewhigh.mdop.bi.test; /** * Created by zzq on 2017/5/11. */ public clas ...

  9. SpringBoot-Jar打包方式

    发布打包 Jar类型打包方式 1.使用mvn celan  package 打包 2.使用java –jar 包名 war类型打包方式 1.使用mvn celan package 打包 2.使用jav ...

  10. SQL优化之踩过的坑【一】

    正看资料看的过瘾,突然收到报警,说服务器负载太高,好吧,登录服务器看看,我擦嘞,还能不能愉快的玩耍了?下面是当时的负载情况 看见mysql使用cpu已经到了2000,io没有等待.说明应该没有大的临时 ...