使用Javascript更改类，默认将一个元素的类设置为相反

Posted 2023-04-14

【中文标题】使用Javascript更改类，默认将一个元素的类设置为相反

【英文标题】：Change class using Javascript, set one element's class opposite by default

【发布时间】：2012-05-29 17:14:32

【问题描述】：

首先，我意识到我的问题可能与其他一些帖子比较相似，但是，我尝试实现其他帖子中的代码，但无法让它按照我想要的方式工作。我对 javascript 还很陌生，所以请多多包涵。

我在单独的 div 元素中选择了一些链接，它们看起来像标签。每次我点击不同的链接时，活动链接的背景颜色都会从灰色变为白色，之前活动链接的背景颜色也会从白色变为灰色。

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

代码如下：

    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>

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

【问题讨论】：

只有我一个人，还是你最后忘了问你的问题......？

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

【参考方案1】：

将首页链接的初始类更改为'active'...？

【讨论】：

当我将主页链接设置为活动时，它会将背景颜色永久显示为白色。

开始 selected 作为您的主页选项卡，而不是 null。郑重声明，这看起来是一种糟糕的制表方式。您的 HTML 中不应该有任何 JS，并且您不应该管理 JS 中的状态，尤其是当您使用类进行标记时。

请问我该如何实现？

【参考方案2】：

将活动类添加到具有主页链接的 div（在设计时）

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

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

【讨论】：

我刚刚意识到我在代码中留下了onload，我的想法是当页面加载时它会将类更改为活动状态。有什么方法可以实现吗？我刚刚尝试了您所说的，但它只是将主页链接背景颜色永久保持为白色。