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

基于jQuery實現(xiàn)選項卡效果

 更新時間：2017年01月04日 15:50:57   作者：小伍  
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)選項卡效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

選項卡，不多說了，做不做網(wǎng)絡(luò)的都知道，我學(xué)的比較晚，現(xiàn)在發(fā)一個選項卡制作的代碼

效果下圖所示：

源代碼：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
  body{font-size:13px}
  ul,li{margin:0;padding:0;list-style:none}
  #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
  #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
  #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
  #content li{display:none}
  #content li.conFocus{display:block}
</style>
<body>
<script type="text/javascript">
  $(function(){
    $('#menu li').each(function(index){
      $(this).click(function(){
        $('#menu li.tabFocus').removeClass('tabFocus');
        $(this).addClass('tabFocus');
        $('#content li:eq('+index+')').show().siblings().hide();
      })
    });
  });
</script>
<ul id="menu">
  <li class="tabFocus">家居</li>
  <li>電器</li>
  <li>二手</li>
</ul>
<ul id="content">
  <li class="conFocus">這是家居的內(nèi)容</li>
  <li>這是電器的內(nèi)容</li>
  <li>這是家居的內(nèi)容</li>
</ul>
</body>
</html>

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

相關(guān)文章

最新評論