快捷導(dǎo)航

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

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

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

本文實(shí)例講述了Jquery滑動(dòng)門/tab切換實(shí)現(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)前點(diǎn)擊的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")      //選取子節(jié)點(diǎn)。不選取子節(jié)點(diǎn)的話，會(huì)引起錯(cuò)誤。如果里面還有div 
                    .eq(index).show()  //顯示 <li>元素對(duì)應(yīng)的<div>元素
                    .siblings().hide(); //隱藏其它幾個(gè)同輩的<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">時(shí)事</li>
            <li>體育</li>
            <li>娛樂(lè)</li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>時(shí)事</div>
         <div class="hide">體育</div>
         <div class="hide">娛樂(lè)</div>
    </div>
</div>
 
</body>
</html>

運(yùn)行結(jié)果：