JS简单选项卡

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

原创最新推荐文章于 2024-12-04 13:26:46 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

Web Front 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一个简单的标签页切换示例，通过HTML和JavaScript实现两个不同内容区域的显示与隐藏。用户可以通过点击顶部的标签来查看不同的内容。

<body>
<div id="tabContainer">
	<ul>
	   <li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">A类项目</a></li>
	   <li id="tab2"><a href="#" onclick="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>