快捷導(dǎo)航

jQuery UI制作選項卡（tabs）

更新時間：2016年12月13日 11:46:48 作者：Tiramisu_C

這篇文章主要為大家詳細(xì)介紹了jQuery UI制作選項卡tabs的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先看一下效果：

Jquery-UI 選項卡的制作實際上是利用錨點鏈接的原理，實現(xiàn)起來非常的簡單。

第一步：引入 jquery 和 jquery-ui 文件。
以下是我的head部分的代碼：

<head> 
  <meta charset="UTF-8"> 
  <title>選項卡</title> 
  <link rel="stylesheet" href="style.css"> 
  <script type="text/javascript" src="../libs/jquery-1.8.3.js"></script> 
  <script type="text/javascript" src="../libs/jquery-ui-1.9.2.custom.js"></script> 
  <script type="text/javascript" src="script.js"></script> 
</head>

第二步：寫面板布局。

<body> 
  <div id="tab"> 
    <ul> 
      <li><a href="#tab-1" class="isSlected">TAB1</a></li> 
      <li><a href="#tab-2" class="unSlected">TAB2</a></li> 
      <li><a href="#tab-3" class="unSlected">TAB3</a></li> 
    </ul> 
    <div id="tab-1">TAB1內(nèi)容-人民網(wǎng)北京12月9日電 （唐嘉藝）本周，天津任市委常委、市紀(jì)委書記；</div> 
    <div id="tab-2">TAB2內(nèi)容-湖南省十二屆人大六次會議閉幕，湖南省代省長許達(dá)哲當(dāng)選省長。 
    北京、天津、上海、湖北省級黨委班子迎來新成員：北京市副市長林克慶任北京市委常委；中央國家機關(guān)紀(jì)工委書記鄧修明“空降”</div> 
    <div id="tab-3">TAB3內(nèi)容-上海市副市長周波任上海市委常委；湖北省副省長任振鶴、十堰市委書記周霽任湖北省委常委。</div> 
  </div> 
</body>

其中 id="tab"的div用來包裹我們的整個選項卡，ul中的內(nèi)容就是我們點擊切換內(nèi)容的部分，ul下方的div是當(dāng)我們切換選項卡所展示的內(nèi)容。

其中的a標(biāo)簽 href="#tab-1"，href="#tab-2"，href="#tab-3"，分別對應(yīng)div中的 id="tab-1",id="tab-2",id="tab-3"。選項卡的樣式和點擊選中之后的效果我們可以自己定義成想要的樣子。

第三步：編寫腳本。
這里我們同樣要在dom加載完成之后開始運行我們的代碼，選取到我們的tab之后，使用.tabs()方法即可實現(xiàn)選項卡功能。