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

Posted

技术标签:

【中文标题】使用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,我的想法是当页面加载时它会将类更改为活动状态。有什么方法可以实现吗?我刚刚尝试了您所说的,但它只是将主页链接背景颜色永久保持为白色。

以上是关于使用Javascript更改类,默认将一个元素的类设置为相反的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 JavaScript 更改元素的类?

如何使用 JavaScript 更改元素的类?

如何将不同的类传递给元素指令

Mounted 中的类更改不会触发过渡 vuejs

在 JavaScript 上使用相同的类更改 <a> href [重复]

元素的类可以根据浏览器是加宽还是缩小而改变?