欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery+CSS實現(xiàn)的標簽頁效果示例【測試可用】

 更新時間:2018年08月14日 10:59:26   作者:筱葭  
這篇文章主要介紹了jQuery+CSS實現(xiàn)的標簽頁效果,涉及基于jQuery的事件綁定、頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery+CSS實現(xiàn)的標簽頁效果。分享給大家供大家參考,具體如下:

CSS代碼:

#tabs{
  width:600px;
  height:250px;
  background:white;
  margin:20px;
}
#tabs ul{
  float:left;
  margin:20px 0 0 20px;
  padding:0;
}
#tabs li{
  width:80px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-bottom:1px solid grey;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background:#eeeeee;
  position:relative;
  top:1px;
}
#tabs li:hover{
  color:#aaaaaa;
  cursor:pointer;
}
.items{
  width:560px;
  height:175px;
  font-size:16px;
  text-align:center;
  border:1px solid grey;
  float:left;
  margin-left:20px;
}

jQuery代碼:

$(document).ready(function(){
  $("li").bind("click",function(){
    $(".items").hide();
    $("#"+$(this).attr("name")).show();
    $("li").css({
      "border-top":"1px solid white",
      "border-left":"1px solid white",
      "border-right":"1px solid white",
      "border-bottom":"1px solid grey",
      "background":"#eeeeee"
    });
    $(this).css({
      "border-top":"1px solid grey",
      "border-left":"1px solid grey",
      "border-right":"1px solid grey",
      "border-bottom":"1px solid white",
      "background":"white"
    });
  });
  $("li:first-child").click();
});

HTML部分代碼:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="tabs">
  <ul>
    <li name="lst1">標簽1</li>
    <li name="lst2">標簽2</li>
    <li name="lst3">標簽3</li>
    <li name="lst4">標簽4</li>
  </ul>
  <div class="items" id="lst1">內容1</div>
  <div class="items" id="lst2">內容2</div>
  <div class="items" id="lst3">內容3</div>
  <div class="items" id="lst4">內容4</div>
</div>

這里使用在線HTML/CSS/JavaScript前端代碼調試運行工具http://tools.jb51.net/code/WebCodeRun,測試運行效果如下:

感興趣的朋友可以動手測試一下看看效果如何。

PS:或者還可以將上述代碼組合成完成的HTML頁面,再使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun,測試運行效果。

更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論