选项卡切换

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bravolove/p/6175690.html

文章标签：

#javascript #ViewUI

本文介绍如何使用HTML、CSS和JavaScript实现一个简单的Tab选项卡效果。通过设置不同的样式类来切换显示的内容，并利用JavaScript监听点击事件以改变当前活动的Tab。此示例适用于前端开发初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{background: red}
        #list{list-style: none;}
        #list li{position: relative; float: left; margin: 50px;}
        div, .hide{display: none}
        .show{display: block}

    </style>
</head>
<body>
<script>
    window.onload = function(){
        var oUl = document.getElementById('list');
        var arrLi = oUl.getElementsByTagName('li');

        for(var i = 0; i < arrLi.length; i++){
            fnTab(arrLi[i], arrLi);
        }

        function fnTab(oLi, aLi){
            var oA = oLi.getElementsByTagName('a')[0];
            var oDiv = oLi.getElementsByTagName('div')[0];
            oA.onclick = function () {
                for(var i = 0; i < aLi.length; i++){
                    aLi[i].getElementsByTagName('a')[0].className = '';
                    aLi[i].getElementsByTagName('div')[0].className = 'hide';
                }
                oA.className = 'red';
                oDiv.className = 'show';
            }
        }

    }
</script>
<ul id="list">
    <li>
        <a  href="javascript:;">简介</a>
        <div>简介.........</div>
    </li>
    <li>
        <a href="javascript:;">会议</a>
        <div>会议.........</div>
    </li>
    <li>
        <a href="javascript:;">回看</a>
        <div>回看.........</div>
    </li>
</ul>

</body>
</html>

转载于:https://www.cnblogs.com/bravolove/p/6175690.html