使用Javascript更改类,设置一个元素';s类默认情况下是相反的

使用Javascript更改类,设置一个元素';s类默认情况下是相反的,javascript,class,default,background-color,Javascript,Class,Default,Background Color,首先,我意识到我的问题可能与其他一些帖子相对类似,然而,我尝试从其他帖子实现代码,但就是无法让它按照我想要的方式工作。我对Javascript非常陌生,所以请容忍我 我在单独的div元素中选择了一些链接,使其看起来像选项卡。每次我点击一个不同的链接,活动链接的背景颜色从灰色变为白色,而以前活动链接的背景颜色从白色变为灰色 这是我的难题:我希望主页链接有一个默认设置,以便在页面加载时有一个白色背景 代码如下: div.none { background-color: #cccccc

首先,我意识到我的问题可能与其他一些帖子相对类似,然而,我尝试从其他帖子实现代码,但就是无法让它按照我想要的方式工作。我对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>
div.none{
背景色:#中交;
边界半径:10px 10px 0px 0px;
浮动:对;
填充:5px15px 3px15px;
}
活动分区{
背景色:白色;
边界半径:10px 10px 0px 0px;
浮动:对;
填充:5px15px 3px15px;
}
...
选择的var=null;
函数切换类(x){
如果(已选择!=null)
selected.className='none';
所选=x;
x、 className='active';
}
...

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

将主链接的初始类更改为
'active'
。?

将主链接的初始类更改为
'active'
。?

将活动类添加到具有主链接的div中(在设计时)


但是,当选择其他选项卡时,您仍然需要在javascript中编写逻辑以删除该类,并将
活动
类添加到所选选项卡。

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


但是,当选择其他选项卡时,您仍然需要在javascript中编写逻辑以删除该类,并将
活动
类添加到所选选项卡中。

这就是我,或者你忘了在最后问你的问题…?我的难题是:我希望主页链接有一个默认设置,这样当页面加载时它有一个白色背景。这是我的问题。是我,还是你最后忘了问你的问题了…?我的难题是:我想要一个默认的主页链接设置,这样当页面加载时它会有一个白色背景。这是我的问题。当我将主页链接设置为活动时,它会将背景颜色永久显示为白色。开始
选择
作为主页选项卡,而不是null。记录在案,这看起来是一个可怕的方式做标签。你的HTML中不应该有任何JS,你也不应该管理JS中的状态,特别是如果你使用类进行标记。请问我如何实现这一点?当我将主页链接设置为活动时,它会将背景颜色永久显示为白色。开始
选择
作为主页选项卡,而不是null。记录在案,这看起来是一个可怕的方式做标签。你的HTML中不应该有任何JS,你也不应该管理JS中的状态,特别是如果你用类标记。请问我该如何实现这一点?我刚刚意识到我的代码中没有加载,我的想法是当页面加载时,它会将类更改为活动。有什么方法可以实现这一点吗?我只是尝试了你所说的,但它只是将主页链接背景颜色永久保持为白色。我刚刚意识到我在代码中没有加载,我的想法是当页面加载时,它会将类更改为活动。有什么方法可以实现这一点吗?我刚试过你说的,但它只是保持主页链接背景颜色为白色永久。
<div class="none active" id="t6"><a class="menu" href="#6" onload="toggleClass(t6)" onclick="toggleClass(t6)" target="tabs">Home</a></div>​