tab切换 jquery

核心代码:

$(‘#top li‘).click(function(){
   var index=$(‘#top li‘).index(this);
   $(‘#top li:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘li‘).removeClass(‘cur‘);
   $(‘#content div:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘div‘).removeClass(‘cur‘);
  });

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7     body{
  8         padding:0;
  9         margin:0;
 10         font:"微软雅黑 Light" 21px;
 11     }
 12     #top{
 13     }
 14     ul{
 15         list-style:none;
 16         margin:0;
 17         display:block;
 18         margin-top:10px;
 19     }
 20     #top ul li{
 21         display:block;
 22         float:left;
 23         width:96px;
 24         text-align:center;
 25         border:2px #A30BCC solid;
 26         cursor:pointer;
 27     }
 28     #top ul li.cur{
 29         border-bottom:none;
 30     }
 31     #content{
 32         clear:both;
 33         width:400px;
 34         height:300px;
 35         background:#84BEDB;
 36         margin-left:41px;
 37     }
 38     #content div{
 39         display:none;
 40     }
 41     #content div.cur{
 42         display:block;
 43     }
 44 </style>
 45 <script src="../jquery-2.1.1.js" type="text/javascript"></script>
 46 <script>
 47     $(function(){
 48         //:first-child 选择器选取属于其父元素的第一个子元素,是一个集合
 49         //:first选择器选取的是所有中的唯一的一个
 50         //$(‘#top ul li:first-child‘).css(‘background‘,‘#39F015‘);
 51         //$(‘#top ul li:nth-child(odd)‘).css(‘font-weight‘,‘bolder‘);
 52
 53         /*var d = $(‘#content‘).contents();
 54         //alert(d.size())
 55         d.each(function(index, element) {
 56             if(element.nodeName=="DIV"){//必须是大写,受不了
 57                 $(this).css(‘background‘,‘#53E77F‘);
 58             }
 59         });
 60         */
 61
 62         /*
 63         $(‘#top ul li‘).filter(function(index) {
 64             if($(this).attr(‘class‘)==‘cur‘)
 65                 return $(this);
 66             return null;
 67         }).css(‘background‘,‘#39F015‘);
 68         *////
 69
 70         //$(‘#top ul li‘).filter(‘.cur‘).css(‘background‘,‘#39F015‘);
 71
 72
 73         $(‘#top li‘).click(function(){
 74             var index=$(‘#top li‘).index(this);
 75             $(‘#top li:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘li‘).removeClass(‘cur‘);
 76             $(‘#content div:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘div‘).removeClass(‘cur‘);
 77         });
 78
 79     })
 80 </script>
 81 </head>
 82
 83 <body>
 84 <div>
 85     <div id="top">
 86         <ul>
 87             <li class="cur">曹**</li>
 88             <li>张*</li>
 89             <li>彭**</li>
 90             <li>廖*</li>
 91         </ul>
 92     </div>
 93     <div id="content">
 94          <div class="cur">黑傻子</div>
 95         <div>胖二子</div>
 96         <div>白妹纸</div>
 97         <div>萌妹纸</div>
 98     </div>
 99 </div>
100 </body>
101 </html>

tab切换 jquery,布布扣,bubuko.com

时间: 08-10

tab切换 jquery的相关文章

tab切换jquery代码

http://immmmm.com/jquery-tab-switch-code-improved.html html <div id="sidebar-tab">   <div id="tab-title">   <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章<

jQuery的DOM操作实例(1)——选项卡&amp;&amp;Tab切换

一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍历的一种方法,参数是元素的索引 .index() .要注意index是基于0开始的:如果index为负数,则指示从集合结尾开始的位置. .index()方法搜索与参数表示的对象匹配的元素,并返回相应元素的索引值.如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1. 经常要用inde

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

基于jQuery图片缩放tab切换效果

基于jQuery图片缩放tab切换效果 上图: 主要效果是一个切换的效果,鼠标移动进行效果切换,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等 预览地址:http://www.qhttl.com/content/view/2014/07/23/jiaoben92/jiaoben92/index.html 基于jQuery图片缩放tab切换效果

jquery写的tab切换效果 非常简单

自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12px;}ul{list-style:none;}ul li a{text-decoration:none; color:#000000;}ul li a:hover{text-decoration:underline; color:#cc0000;}#con{margin:50px auto; width:96

tab切换

今天我们开始试着写一些js特效,先写一个简单的tab切换,在现实生活中,一些网站tab切换是必不可少的,来下面让我们一起写一下 1,思路: 当点击的时候实现切换并改变里面的内容jQuery实现 2,代码 html代码 1 <div class="wrapper"> 2 <ul class="tab"> 3 <li class="tab-item active">国际大牌<span>◆</spa

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t

bootstrap 标签页tab切换js(含报错原因)

booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留作自己工作备忘. 1 $('a[data-toggle="tab"]') 2 $('#myTab a[href="#profile"]').tab('show') 3 $('#myTab a:first').tab('show') 4 $('#myTab a:last'

react做tab切换的几种方式

最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到.当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq.不过不得不吐槽一下,在jquery很简单的东西,在react中稍微复杂化了一点. 目前我用到的tab切换只有两种方式,所以暂时总结这两种,以后有遇到其他的再总结. 第一种.只是子