當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）

發布時間：2025/3/20 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實例1（點擊切換）：

  <!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>   <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>   <title></title>   <style?type="text/css">   ?*{?margin:0;?padding:0;}   ?body?{?font:12px/19px?Arial,?Helvetica,?sans-serif;?color:#666;}   ?.tab?{?width:240px;margin:50px;}   ?.tab_menu?{?clear:both;}   ?.tab_menu?li?{?float:left;?text-align:center;?cursor:pointer;?list-style:none;?padding:1px?6px;?margin-right:4px;?background:#F1F1F1;?border:1px?solid?#898989;?border-bottom:none;}   ?.tab_menu?li.hover?{?background:#DFDFDF;}   ?.tab_menu?li.selected?{?color:#FFF;?background:#6D84B4;}   ?.tab_box?{?clear:both;?border:1px?solid?#898989;?height:100px;}   ?.hide{display:none}   </style>  <!--???引入jQuery?-->  ?<script?src="../../scripts/jquery.js"?type="text/javascript"></script>   <script?type="text/javascript"?>   //<![CDATA[   ????$(function(){   ????????var?$div_li?=$("div.tab_menu?ul?li");   ????????$div_li.click(function(){   ????????????$(this).addClass("selected")????????????//當前<li>元素高亮   ???????????????????.siblings().removeClass("selected");??//去掉其它同輩<li>元素的高亮   ????????????var?index?=??$div_li.index(this);??//?獲取當前點擊的<li>元素?在?全部li元素中的索引。   ????????????$("div.tab_box?>?div")????? //選取子節點。不選取子節點的話，會引起錯誤。如果里面還有div?   ????????????????????.eq(index).show()???//顯示?<li>元素對應的<div>元素   ????????????????????.siblings().hide();?//隱藏其它幾個同輩的<div>元素   ????????}).hover(function(){   ????????????$(this).addClass("hover");   ????????},function(){   ????????????$(this).removeClass("hover");   ????????})   ????})  //]]>  </script>   </head>   <body>    <div?class="tab">   ????<div?class="tab_menu">   ????????<ul>   ????????????<li?class="selected">時事</li>   ????????????<li>體育</li>   ????????????<li>娛樂</li>   ????????</ul>   ????</div>   ????<div?class="tab_box">?   ?????????<div>時事</div>   ?????????<div?class="hide">體育</div>   ?????????<div?class="hide">娛樂</div>   ????</div>   </div>    </body>   </html>   

瀏覽器效果：

實例2（導航欄滑過）：

  <!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>   <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>   <title>鼠標滑過jQuery選項卡切換</title>   <script?type="text/javascript"?src="js/jquery.min.js"></script>   <style?type="text/css">  /*?case?*/ .case{width:960px;margin:100px?auto;background:#fff;padding:15px;box-shadow:0?0?10px?#ccc;} .case?.title{height:20px;border-bottom:3px?solid?#e7e7e7;padding-bottom:10px;} .case?.title?h2{font-size:20px;font-family:"microsoft?yahei";} .case?.title-list{position:relative;top:6px;} .case?.title-list?li{width:146px;line-height:20px;text-align:center;float:left;display:inline;cursor:pointer} .case?.title-list?li.on{color:#ff6600;font-weight:bold;} .case?.title-list?span{position:absolute;top:24px;left:0px;width:146px;height:7px;border-top:3px?solid?#ff6600;overflow:hidden;text-align:center;}  .product{position:relative;display:none;margin-top:20px;?height:auto} .product?ul{} .product-wrap?.show{display:block;}  </style>   //<![CDATA[  <script?type="text/javascript"> $(function(){??  ????????????  ????//設計案例切換   ????$('.title-list?li').click(function(){   ????????var?liindex?=?$('.title-list?li').index(this);   ????????$(this).addClass('on').siblings().removeClass('on');   ????????$('.product-wrap?div.product').eq(liindex).fadeIn(10).siblings('div.product').hide();   ????????var?liWidth?=?$('.title-list?li').width();   ????????$('.case?.title-list?span').stop(false,true).animate({'left'?:?liindex?*?liWidth?+?'px'},300);   ????});   ?????  }); </script> //]]>  </head>   <body>    <div?class="case">    ????<div?class="title">   ?????  ????????<ul?class="title-list">   ????????????<li?class="on">LOGO</li>   ????????????<li>宣傳單</li>   ????????????<li>畫冊</li>   ????????????<span><</span>   ????????</ul>   ????</div>   ?????  ????<div?class="product-wrap">   ????????<!--案例1-->   ????????<div?class="product?show">   ????????????<ul?class="cf">   ????????????????<li?class="ml0">   ????????????????????<a?href="http://www.17sucai.com"?class="imgwrap"><img?src="images/1.jpg"></a>   ????????????????????<p?class="mt10">?<a?href="http://www.17sucai.com">站長素材網站logo...?</a></p>   ????????????????????<p?class="pb10">行業類別：藝術攝影,文化體育</p>   ????????????????</li>   ????????????????<li>   ????????????????????<a?href="http://www.17sucai.com"?class="imgwrap"><img?src="images/1.jpg"></a>   ????????????????????<p?class="mt10">?<a?href="http://www.17sucai.com">?深圳達文影視傳媒有限公司logo...?</a></p>   ????????????????????<p?class="pb10">行業類別：藝術攝影,文化體育</p>   ????????????????</li>   ????????????????<li>   ????????????????????<a?href="http://www.17sucai.com"?class="imgwrap"><img?src="images/1.jpg"></a>   ????????????????????<p?class="mt10">?<a?href="http://www.17sucai.com">?深圳達文影視傳媒有限公司logo...?</a></p>   ????????????????????<p?class="pb10">行業類別：藝術攝影,文化體育</p>   ????????????????</li>   ????????????????<li>   ????????????????????<a?href="http://www.17sucai.com"?class="imgwrap"><img?src="images/1.jpg"></a>   ????????????????????<p?class="mt10">?<a?href="http://www.17sucai.com">?深圳達文影視傳媒有限公司logo...?</a></p>   ????????????????????<p?class="pb10">行業類別：藝術攝影,文化體育</p>   ????????????????</li>   ????????????</ul>   ????????</div>   ?????????  ????????<!--案例2-->   ????????<div?class="product">   ????????2   ????????</div>   ?????????  ????????<!--案例3-->   ????????<div?class="product">   ????????????3   ????????</div>   ?????????  ?????????  ????</div>   </div>    </body>   </html>   

瀏覽器效果：

本文轉自 ?小旭依然 ?51CTO博客，原文鏈接:http://blog.51cto.com/xuyran/1789219

總結

以上是生活随笔為你收集整理的超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：杂七杂八（1）——如何查看本机的.NET
下一篇： SpringMVC处理MYSQL BLO