快捷導(dǎo)航

Jquery滑動門/tab切換實現(xiàn)方法完整示例

更新時間：2020年06月05日 11:09:16 作者：moqiang02

這篇文章主要介紹了Jquery滑動門/tab切換實現(xiàn)方法,結(jié)合完整實例形式分析了Jquery滑動門/tab切換具體操作技巧與頁面元素動態(tài)操作實現(xiàn)方法,需要的朋友可以參考下

本文實例講述了Jquery滑動門/tab切換實現(xiàn)方法。分享給大家供大家參考，具體如下：

<!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>
 *{ 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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(function(){
      var $div_li =$("div.tab_menu ul li");
      $div_li.click(function(){
            $(this).addClass("selected")      //當(dāng)前<li>元素高亮
                  .siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮
      var index = $div_li.index(this); // 獲取當(dāng)前點擊的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")      //選取子節(jié)點。不選取子節(jié)點的話，會引起錯誤。如果里面還有div 
                    .eq(index).show()  //顯示 <li>元素對應(yīng)的<div>元素
                    .siblings().hide(); //隱藏其它幾個同輩的<div>元素
        }).hover(function(){            //添加光標(biāo)滑入滑出效果
            $(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>

運行結(jié)果：