使用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更改类,默认将一个元素的类设置为相反的主要内容,如果未能解决你的问题,请参考以下文章