jQuery UI制作選項(xiàng)卡（tabs）

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

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

先看一下效果：

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

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

<head> 
  <meta charset="UTF-8"> 
  <title>選項(xiàng)卡</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)容-湖南省十二屆人大六次會(huì)議閉幕，湖南省代省長(zhǎng)許達(dá)哲當(dāng)選省長(zhǎng)。 
    北京、天津、上海、湖北省級(jí)黨委班子迎來新成員：北京市副市長(zhǎng)林克慶任北京市委常委；中央國(guó)家機(jī)關(guān)紀(jì)工委書記鄧修明“空降”</div> 
    <div id="tab-3">TAB3內(nèi)容-上海市副市長(zhǎng)周波任上海市委常委；湖北省副省長(zhǎng)任振鶴、十堰市委書記周霽任湖北省委常委。</div> 
  </div> 
</body>

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

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

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

$(function(){ 
  $("#tab").tabs(); 
});

非常簡(jiǎn)單的幾個(gè)步驟即可實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡功能，具體樣式效果可根據(jù)自己的需求來編寫。
現(xiàn)附上該例子源碼地址：https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/tab

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: