<!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. 2014年蓝桥杯省赛A组c++第2题(推公式)

    /* 标题:切面条 一根高筋拉面,中间切一刀,可以得到2根面条. 如果先对折1次,中间切一刀,可以得到3根面条. 如果连续对折2次,中间切一刀,可以得到5根面条. 那么,连续对折10次,中间切一刀,会 ...

  2. [knowledge] 停止等待协议

    再读TCP/IP详解 说到流量控制, 可能便涉及了两方面 1. 停止等待协议. https://baike.baidu.com/item/%E5%81%9C%E6%AD%A2%E7%AD%89%E5% ...

  3. [skill][msgpack] 初试msgpack库以及基本使用

    It's like JSON.   but fast and small. http://msgpack.org/index.html 源码: https://github.com/msgpack/m ...

  4. SpringMVC 的使用映射路径 <mvc:resources >

    以下是测试结果,可能存在纰漏,暂记录一下. 使用springMVC时,一般将DispatcherServlet请求映射配置为"/",则Spring MVC将捕获Web容器所有的请求 ...

  5. 离线应用与客户端存储（cookie storage indexedDB）

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

  6. 洛谷P3237 米特运输 [HNOI2014] hash/二进制分解

    正解:hash/二进制分解 解题报告: 传送门! umm首先提取下题意趴QAQ 大概是说给一棵树,每个点有一个权值,要求修改一些点的权值,使得同一个父亲的儿子权值相同,且父亲的权值必须是所有儿子权值之 ...

  7. 洛谷P3234 抄卡组 [HNOI2014] 字符串hash

    正解:字符串hash 解题报告: 传送门! 字符串hash是字符串匹配中很常见的一个方法,原理也很好懂,这里就不做太多阐述辣有时间放到hash笔记里面去QAQ 题意不说了挺好理解的,自带一句话概括好评 ...

  8. 数据库使用：sql server/mysql/sqlite

    本科学过sql server数据库,上研刚开始在做研究时自己想点子自己做,为了简便使用了论文中看到的一个简易数据库sqlite存储使用数据.后来随着数据量的增长,以及数据处理的需求sqlite速度明显 ...

  9. IE报错：[vuex] vuex requires a Promise polyfill in this browser.

    使用的是vue2.0版本 IE报错提醒: 导致原因:使用了 ES6 中用来传递异步消息的的Promise,而IE的浏览器不支持 解决办法: 1.安装babel-polyfill模块,babel-plo ...

  10. 初学git

    初学git,总结了一点东西,可能有理解和操作的不到位的地方,还有就是这个是我之前写在word上的,因为CSDN上不能直接上传,所以拷贝的过程中也可能有其他问题.发的的朋友还望指正... 1.找到“参与 ...