bt欧美区,高潮毛片无遮挡免费高清,成人无码区免费a片视频国产解说

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery最簡(jiǎn)潔實(shí)現(xiàn)tab選項(xiàng)切換

php中世界最好的語(yǔ)言

發(fā)布： 2018-04-26 09:40:18

原創(chuàng)

3320人瀏覽過(guò)

這次給大家?guī)?lái)jQuery最簡(jiǎn)潔實(shí)現(xiàn)tab選項(xiàng)切換，jQuery實(shí)現(xiàn)tab選項(xiàng)切換的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

效果圖：

代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<title>簡(jiǎn)單的tab效果</title>
<style type="text/css">
* {
  padding: 0px;
  margin:0px
}
body {
  text-align: center
}
.wrap ul {
  overflow: hidden
}
.wrap li {
  float: left;
  list-style: none;
  margin-right: 10px;
  cursor: pointer;
  padding: 2px 5px
}
.link {
  cursor: pointer;
  color: #F00
}
.wrap {
  width: 200px;
  margin: 50px auto
}
.wrap, .ellipsis {
  font-size: 12px;
  width: 200px;
}
.tab_p p {
  display: none;
  padding: 10px;
}
.tab_p {
  text-align: left;
  border: 1px #CCC solid;
  height: 200px;
  clear: both
}
.cur {
  background: #060;
  color: #FFF
}
#setTab_2{
  margin-top: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
  //tab
    $("#setTab").setTab();
    $("#setTab_2").setTab();
});
 
/*插件代碼*/
(function ($) {
  $.fn.setTab = function () {
    var getTab=$(this),//this指向調(diào)用函數(shù)的ID
      panels = getTab.children("p.tab_p").children("p"),
      tabs = getTab.find("li");
 
    return this.each(function(){
      $(tabs).click(function(e) {
        var index = $.inArray(this, $(this).parent().find("li"));//this指向li
        if (panels.eq(index)[0]) {
          $(tabs).removeClass("cur");
          $(this).addClass("cur");
          panels.css("display", "none").eq(index).css("display", "block");
        }
      });
       
    });
 }
})(jQuery);
 
 
</script>
</head>
<body class="wrap">
<p id="setTab">
 <ul class="tab_nav">
  <li class="cur">國(guó)事</li>
  <li>軍情</li>
  <li>圖片</li>
 </ul>
 <p class="tab_p">
  <p style="display: block">國(guó)事</p>
  <p>軍情</p>
  <p>圖片</p>
 </p>
</p>
<p id="setTab_2">
 <ul class="tab_nav">
  <li>國(guó)事</li>
  <li class="cur">軍情</li>
  <li>圖片</li>
 </ul>
 <p class="tab_p">
  <p>國(guó)事</p>
  <p style="display: block">軍情</p>
  <p>圖片</p>
 </p>
</p>
</body>
</html>

登錄后復(fù)制

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

jquery實(shí)現(xiàn)元素拖動(dòng)排序（附代碼）

jQuery+CSS實(shí)現(xiàn)標(biāo)簽分欄切換（附代碼）

以上就是jQuery最簡(jiǎn)潔實(shí)現(xiàn)tab選項(xiàng)切換的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！