縱向tab標籤切換效果

時間 2019-11-26

標籤縱向 tab 標籤切換效果简体版

原文原文鏈接

html css js直接用就好css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>縱向tab標籤切換效果</title>
    <style>
        *{ margin:0; padding:0;list-style: none;}
        body {font:12px/1.5 Tahoma;}
        #outer {width:450px;margin:150px auto;}
        #tab {width:150px;float:left;overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
        #tab li {color:#fff;height:30px;cursor:pointer;    line-height:30px;width:150px;}
        #tab li.current {color:#000;background:#ccc;}
        #content {width:295px;float:left;border:1px solid #000;height:400px;  }
        #content div {line-height:25px;display:none;margin:0 30px;padding:10px 0;}
    </style>
</head>

<body>
<!-- html代碼begin -->
<div id="outer">
    <ul id="tab">
        <li class="current">tab標籤</li>
        <li>qq在線客服代碼</li>
        <li>css3</li>
    </ul>
    <div id="content">
        <div style="display:block;">
            <a href="http://www.lanrenzhijia.com/tab">tab標籤</a>
        </div>
        <div>
            <a href="http://www.lanrenzhijia.com/service">qq在線客服代碼</a>
        </div>
        <div>
            <a href="http://www.lanrenzhijia.com/js/css3">css3</a>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<!-- html代碼end -->

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
    //獲取變量==>存變量==>給變量綁定屬性
    $(function(){
            var $li = $('#tab li');//獲取每個標題和內容用變量存起來
            var $ul = $('#content div');

            $li.click(function(){
                var $this = $(this);//用變量把點擊的每個當前的li存起來
                var $t = $this.index();// 獲取當前li下標
                $li.removeClass();//由於默認是第一個顯示  因此先移除
                $this.addClass('current');//再添加當前的
                $ul.css('display','none');//由於默認是第一個顯示  因此先隱藏
                $ul.eq($t).css('display','block');//當前內容再出現
            })
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。