jquery选项卡切换功能实现

最新推荐文章于 2022-09-06 12:08:21 发布

yifangfei11

最新推荐文章于 2022-09-06 12:08:21 发布

阅读量4.2k

点赞数 2

文章标签： jquery 选项卡

本文链接：https://blog.csdn.net/yifangfei11/article/details/80319210

版权

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

  <head> 

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  <title>jquery选项卡切换</title> 

  <style type="text/css"> 

  *{ margin:0px ; padding:0px;} 

  .tab{ width:300px; height:300px; margin:auto;} 

  ul{ list-style:none} 

  .tab .tab_menu ul li{ float:left; width:98px; height:30px; border:1px solid #F00; text-align:center; line-height:30px;} 

  .tab_content > div { width:100%; height:270px; border:1px solid #333; display:none} /*css3的写法*/ 

  .tab_content > div:first-child{ display:block;} 

  .tab_menu .on{ background-color:#F90; color:#FFF} 

  </style> 

  <script type="text/javascript" src="jquery.js"></script> 

  <script type="text/javascript"> 

  $(function(){ 

  //第一：对li进行有点击的事件 

  //第二：把相应的内容显示出来 

  //第三： 换背景颜色 

  $(".tab_menu ul li").click(function(){ 

  $(this).addClass("on").siblings().removeClass("on"); // 让当前的每一个li元素都添加class样式,并且它的同胞元素移出样式 

  //搞定内容 

  //前提：选项卡的索引 

  var index = $(this).index(); //索引从0开始 //获取当前每一个li元素的索引 

  //将对应索引下的div内容显示出来 

  $(".tab_content > div").eq(index).show().siblings().hide(); //.tab_content下的所有的div 找对应的索引下的显示的div,并且显示出现，其他的同胞div隐藏掉 

})

})

  </script> 

  </head> 

  <body> 

  <div class="tab"> 

  <div class="tab_menu"> 

  <ul> 

  <li class="on">选项一</li> 

  <li>选项二</li> 

  <li>选项三</li> 

  </ul> 

  </div> <!--选项卡--> 

  <div class="tab_content"> 

  <div>内容一</div> 

  <div>内容二</div> 

  <div>内容三</div> 

  </div> <!--选项卡里面控制的内容--> 

  </div> 

  </body> 

  </html> 

关注