Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery之選項卡的簡單實現

jQuery之選項卡的簡單實現

發布時間:2014-07-10   編輯:www.4271936.live
本篇文章主要是對jQuery 選項卡的簡單實現進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

jquery實現選項卡功能。首先將界面搭建好。

有導航頭tab_menu,還有內容tab_box。

要實現的效果就是,點擊后,將相應的內容顯示出來,其他內容隱藏掉。

同時為了展現選中狀態,為選中的項添加背景,以示區別。

這一次,我自己寫了代碼,先看html部分:

復制代碼 代碼如下:

<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>

html中,需要一個大的div,里面有兩個子div,一個作為導航頭tab_menu,一個作為內容體tab_box。css代碼負責布局html內容。

css部分:

復制代碼 代碼如下:

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //將導航頭左飄
    text-align:center;  //將文字居中
    list-style:none;  //去除標記符號
    background:#F1F1F1; //設置默認背景色
    border:1px solid #898989; //設置邊框色
    margin-right:4px; //每個li之間的距離為4px
    cursor:pointer;  //鼠標浮上之后,會有小手的標示出現
    padding:1px 6px; //控制li的內部距離
    border-bottom:none;

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//為選中的選項加背景與顏色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
    clear:both; //清楚float效果的影響
    height:100px; //設置高度為100px
    border:1px solid #898989; //設置內容體的邊框樣式
}
.hide{//隱藏需要隱藏的內容div
    display:none;
}

待布局完成之后,進行jQuery的動作:
復制代碼 代碼如下:

<script type='text/javascript'>
$(function(){
    //1.點擊時改變css屬性,移除之前的selected選項,添加新的selected選項
    //2.隱藏之前的div層,顯示對應得div層
    //為導航中的li注冊點擊事件
    var $div_li = $(".tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //var index = $div_li.index(this);
        //$("div.tab_box > div").eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text=='時事')
        {
            $('.tab_box div:contains("時事")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='體育')
        {
            $('.tab_box div:contains("體育")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='娛樂')
        {
            $('.tab_box div:contains("娛樂")').removeClass('hide').siblings().addClass('hide');
        }
    }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        });
});
</script>

這是我寫的jQuery代碼,我的思路是,點擊選項卡時,添加selected樣式,同時移除兄弟選項卡的selected樣式。

再一個,如何才能觸發相應的tab_box中的內容的隱藏與顯示呢?

我發現了他們有相對應的內容,就是選項頭為“實事”的對應的選項體也為“實事”,選項頭為“體育”的對應的選項提也為“體育”等。

我就想,先獲取選項頭的內容,做出判斷,當它為不同的值時,就觸發不同的效果。

效果是實現了,可是漏洞很明顯,因為并不是所有的選項卡都是標題與內容體相對應。

再看看下面的代碼:

復制代碼 代碼如下:

<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>元素
        })
    })
//]]>
</script>

這里的處理就特別的巧妙,它通過獲取li的索引,對選項體進行處理。它巧妙的利用了一個隱藏的對應關系,就是索引值。

這樣即便選項頭與選項體內容不對應,一樣可以實現聯動效果。

通過這次練習,我覺得,自己先動腦子想一想還是很好的??梢园l現思路的差異,才能夠發現不足,知道差距。有時候甚至你的思路會更好呢!

您可能感興趣的文章:
基于JQuery的6個Tab選項卡插件
基于jquery的修改當前TAB顯示標題的代碼
jQuery選項卡 KandyTabs
jQuery之選項卡的簡單實現
JQuery Tab選項卡效果代碼改進版
用jQuery打造TabPanel效果代碼
jQuery選項卡插件 MagicTabs
jQuery Tools tab使用介紹
實用的Jquery選項卡TAB示例代碼
jquery的index方法實現tab效果

關鍵詞: jQuery  選項卡   
[關閉]
微信下载APP完成任务如何赚钱 福彩排列七今晚开奖结果 山东扑克3走势图官网 北京11选5走势图表一定牛 中首投资 浙江6+1开奖 北京快三形态走势图和值 十一选五的最佳买法 加拿大28幸运99预测 黑龙江福彩p62开奖号码 玩彩怎样才能稳赚