JS简单选项卡

最新推荐文章于 2024-12-04 13:26:46 发布

撸依天

最新推荐文章于 2024-12-04 13:26:46 发布

阅读量320

点赞数

分类专栏： Web Front

本文链接：https://blog.youkuaiyun.com/korder/article/details/8568220

版权

Web Front 专栏收录该内容

7 篇文章

订阅专栏

<body>
<div id="tabContainer">
	<ul>
	   <li id="tab1"><a href="#" class="on" οnclick="switchTab('tab1','con1');this.blur();return false;">A类项目</a></li>
	   <li id="tab2"><a href="#" οnclick="switchTab('tab2','con2');this.blur();return false;">B类项目</a></li>
	</ul>
	<div style="clear: both"></div>
	<div id="con1">
		呵呵呵呵...
	</div>
	<div id="con2" style="display: none">
	         霉运也是一种运气...
	</div>
</div>
</body>

切换方法；

<script type="text/javascript">
        function switchTab(ProTag, ProBox) {
            for (i = 1; i < 3; i++) {
                if ("tab" + i == ProTag) {
                    document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
                } else {
                    document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
                }
                if ("con" + i == ProBox) {
                    document.getElementById(ProBox).style.display = "";
                } else {
                    document.getElementById("con" + i).style.display = "none";
                }
            }
        }
</script>

简单样式；

<style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
            line-height: 25px;
            font-size: 12px;
            list-style:none;
        }
        #tabContainer
        {
            margin: 30px;
        }
        #tabContainer li
        {
            float: left;
            width: 80px;
            margin: 0 3px;
            background: #efefef;
            text-align: center;
        }
        #tabContainer a
        {
            display: block;
        }
        #tabContainer a.on
        {
            background: pink;
        }
</style>