jQuery UI制作選項卡（tabs）

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

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

先看一下效果：

Jquery-UI 選項卡的制作實(shí)際上是利用錨點(diǎn)鏈接的原理，實(shí)現(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)選省長。 
    北京、天津、上海、湖北省級黨委班子迎來新成員：北京市副市長林克慶任北京市委常委；中央國家機(jī)關(guān)紀(jì)工委書記鄧修明“空降”</div> 
    <div id="tab-3">TAB3內(nèi)容-上海市副市長周波任上海市委常委；湖北省副省長任振鶴、十堰市委書記周霽任湖北省委常委。</div> 
  </div> 
</body>

其中 id="tab"的div用來包裹我們的整個選項卡，ul中的內(nèi)容就是我們點(diǎn)擊切換內(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"。選項卡的樣式和點(diǎn)擊選中之后的效果我們可以自己定義成想要的樣子。

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