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

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

這篇文章主要介紹了Jquery滑動門/tab切換實現(xiàn)方法,結合完整實例形式分析了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")      //當前<li>元素高亮
                  .siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮
      var index = $div_li.index(this); // 獲取當前點擊的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")      //選取子節(jié)點。不選取子節(jié)點的話，會引起錯誤。如果里面還有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>

運行結果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery實現(xiàn)用方向鍵控制層的上下左右移動
本文將會使用jquery實現(xiàn)以下功能:按下方向鍵時，使層向相應的方向平滑移動20像素；四個方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）,感興趣的朋友可以了解下
2013-01-01
事件委托與阻止冒泡阻止其父元素事件觸發(fā)
當點擊具體的li元素時，發(fā)現(xiàn)ul的事件也被觸發(fā)了，這是我們不想看到的，解決方法就是加一句阻止冒泡即可
2014-09-09
基于jQuery ligerUI實現(xiàn)分頁樣式
這篇文章主要為大家詳細介紹了基于jQuery ligerUI實現(xiàn)分頁樣式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
基于jquery實現(xiàn)點擊左右按鈕圖片橫向滾動
點擊左右按鈕圖片橫向滾動jquery，一次滾動四個，圖片滾動完成，自動回到第一個版面，效果相當不錯，感興趣的前端工程師們可以參考下
2013-04-04
Jquery實現(xiàn)兼容各大瀏覽器的Enter回車切換輸入焦點的方法
本文主要講解的是在做項目中遇到需要Enter回車切換輸入焦點的解決思路以及最終解決方案，很簡單，需要的朋友可以參考下
2014-09-09
jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
這篇文章主要介紹了jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果,涉及jquery鼠標點擊及事件綁定等相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
仿iframe效果Aajx文件上傳實例
下面小編就為大家?guī)硪黄耰frame效果Aajx文件上傳實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jQuery Ajax async=>false異步改為同步時,解決導致瀏覽器假死的問題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時,解決導致瀏覽器假死的問題，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧
2019-07-07
jquery帶動畫效果幻燈片特效代碼
這篇文章主要介紹了jquery帶動畫效果幻燈片特效，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery之end()和pushStack()使用介紹
pushStack()方法在jQuery的DOM操作中被頻繁的使用, 如在parent(), find(), filter()中, 當然還有其他許多類似的方法, 它們往往需要返回一個jQuery封裝過的DOM結果集
2012-02-02