JavaScript多层颜色选项卡嵌套

最新推荐文章于 2021-12-29 19:53:08 发布

原创

最新推荐文章于 2021-12-29 19:53:08 发布 · 267 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css

这篇博客介绍了一个使用JavaScript实现的多层颜色选项卡功能。通过HTML、CSS和JavaScript代码，当鼠标悬停在左侧li元素上时，会相应改变颜色并显示右侧对应的div内容。实现过程中关键在于利用自定义索引值和this关键字。

这是学JavaScript时候的一个作业，如果没有思路还是挺有难度的，但是思路正确的话一步一步来就很简单做出来了。

实现效果

选项卡嵌套

HTML部分代码

 <div class="box" id="box">
        <ul id="leftBox">
            <li class="active">a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
        <div id="rightBox">
            <div id="rightBox1" class="active">
                <a href="#">a1</a>
                <ul class="tabUl">
                    <li class="hover">a1</li>
                    <li>a2</li>
                    <li>a3</li>
                    <li>a4</li>
                </ul>
            </div>
            <div id="rightBox2">
                <a href="#">b1</a>
                <ul class="tabUl">
                    <li class="hover">b1</li>
                    <li>b2</li>
                    <li>b3</li>
                    <li

最低0.47元/天解锁文章