首頁 web前端 js教程 jQuery之選項卡的簡單實作_jquery

jQuery之選項卡的簡單實作_jquery

May 16, 2016 pm 04:57 PM
jquery 選項卡

jQuery實作選項卡功能。首先將介面搭建好。

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

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

同時為了展現選取狀態,為選取的項目新增背景,以示區別。

這次,我自己寫了程式碼,先看html部分:

複製程式碼 程式碼如下:


程式碼如下:



   

       

             體育
               
  • 娛樂中

  •        

  
時事

        
體育

        
娛樂

    
娛樂


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


css部分:

程式碼如下:


{gin
{gin
*{ :0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
 order>
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //將導覽頭左飄
    float:left;  //將導航頭左飄
    float:left;  //將導覽頭左飄
文字置中
    list-style:none;  //移除標記符號
    background:#F1F1F1; //設定預設背景色
    border:1px solid #89898    cursor:pointer;  //滑鼠浮上之後,會有小手的標示出現
    padding:1px 6px; //控制li的內部距離
    border-bottom:none;

}
.tab_menu li.hover{
    background:#DFDFDF;
}
    background:#DFDFDF;
}
    background:#DFDFDF;
}
.選項加背景與顏色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
   clear:ar:); 100px; //設定高度為100px
    border:1px solid #898989; //設定內容體的邊框樣式
}
.hide{//隱藏中所需的內容;
}複製代碼程式碼如下:


再看下面的程式碼:

複製程式碼

程式碼如下:


程式碼如下://    $(function(){        var $div .click(function(){
            $(this).addClass("selected")             .siblings().removeClass("selected");  //去掉其它同輩
  • 元素的高亮
                var index =  $div_li.index(this);  // 取得目前點選的
  • 元素在全部                  >                   🎜>

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

    這樣即便選項頭與選項體內容不對應,一樣可以達到連動效果。

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

  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章標籤

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    jQuery引用方法詳解:快速上手指南 jQuery引用方法詳解:快速上手指南 Feb 27, 2024 pm 06:45 PM

    jQuery引用方法詳解:快速上手指南

    jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

    jQuery中如何使用PUT請求方式?

    jQuery如何移除元素的height屬性? jQuery如何移除元素的height屬性? Feb 28, 2024 am 08:39 AM

    jQuery如何移除元素的height屬性?

    jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

    jQuery小技巧:快速修改頁面所有a標籤的文本

    深度剖析:jQuery的優勢與劣勢 深度剖析:jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

    深度剖析:jQuery的優勢與劣勢

    使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

    使用jQuery修改所有a標籤的文字內容

    了解jQuery中eq的作用及應用場景 了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

    了解jQuery中eq的作用及應用場景

    如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

    如何判斷jQuery元素是否具有特定屬性?

    See all articles