Question

首先，我意识到我的问题可能与其他一些帖子相似，但是，我尝试从其他帖子实现代码，但却无法按照我想要的方式工作。我对Javascript很陌生，所以请耐心等待。

我在单独的div元素中有一系列链接，看起来像标签。每次我点击不同的链接时，活动链接的背景颜色从灰色变为白色，之前活动链接的背景颜色从白色变为灰色。

这是我的难题：我想要一个Home链接的默认设置，以便在页面加载时它具有白色背景。

以下是代码：

    div.none {
    background-color: #cccccc;
    border-radius: 10px 10px 0px 0px;
    float: right;
    padding: 5px 15px 3px 15px;
    }

    div.active {
    background-color: white;
    border-radius: 10px 10px 0px 0px;
    float: right;
    padding: 5px 15px 3px 15px;
    }

    ...

    <script type="text/javascript">

    var selected = null;

    function toggleClass(x) {
        if (selected != null)
            selected.className = 'none';

        selected = x;
        x.className = 'active';
    }

    </script>

    ...

    <div class="none" id="t1"><a class="menu" href="#1.html" onclick="toggleClass(t1)" target="tabs">Book Online</a></div>
    <div class="none" id="t2"><a class="menu" href="#2.html" onclick="toggleClass(t2)" target="tabs"> Contact</a></div>
    <div class="none" id="t3"><a class="menu" href="#3" onclick="toggleClass(t3)" target="tabs">News</a></div>
    <div class="none" id="t4"><a class="menu" href="#4" onclick="toggleClass(t4)" target="tabs"> Mobile Recording</a></div>
    <div class="none" id="t5"><a class="menu" href="#5" onclick="toggleClass(t5)" target="tabs"> Recording Studios</a></div>
    <div class="none" id="t6"><a class="menu" href="#6" onload="toggleClass(t6)" onclick="toggleClass(t6)" target="tabs">Home</a></div>

如果您能提供帮助，请提前感谢您！

Answer 1

将主要链接的初始类更改为'active' ...？

Answer 2

将活动类添加到div，该div具有Home（设计时）

的链接

<div class="none active" id="t6"><a class="menu" href="#6" onload="toggleClass(t6)" onclick="toggleClass(t6)" target="tabs">Home</a></div>

但是，当您选择其他选项卡时，您仍然必须在javascript中编写逻辑以删除该类，并将active类添加到所选选项卡。

使用Javascript更改类，默认情况下设置一个元素的类

2 个答案: