将类添加到列表元素

Question

将类添加到列表元素

我试图将一个活动的类添加到列表元素,并不能解决为什么这个方法不起作用任何指导将不胜感激.请参阅下面的代码.

这是HTML

<ul class="Menu">
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab1','tab1text')">Menu Item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab2','tab2text')">Menu item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab3','tab3text')">Menu Item</a></li>
<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab4','tab4text')">Menu Item</a></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

和CSS一起上课

.tab {
color:;
background-color:;
font-family: 'Roboto', sans-serif;
} 

.active {
color: #00ffff;
}

Run Code Online (Sandbox Code Playgroud)

和Javascript功能

<script>
function showContent(obj, content, text)
obj.className += " active";
</script>

Run Code Online (Sandbox Code Playgroud)

这是一个JSfiddle以及https://jsfiddle.net/wxjop98f/1/

我无法弄清楚为什么这不起作用,因为各种教程都说明了这种方法.非常感谢您提供的任何帮助.

Answer 1

Dek*_*kel 7

几个问题:

你需要确保jsfiddle中的javascript块被加载<head>(没有换行)
应该包含功能块 {...}
最好使用obj.classList.add(虽然obj.className += ' active'也可以使用).
如果你想要使用颜色.active来处理<a>你应该使用的元素a.active(否则anchor颜色定义将获得更高的优先级).

这是修复:https:
//jsfiddle.net/54w6ntx7/

一个完整的片段:

function showContent(obj, content, text) {
  //debugger;
  obj.classList.add("active");
}

Run Code Online (Sandbox Code Playgroud)

a:link{
  color: inherit;
  text-decoration: inherit;
}
a:visited{
  color: inherit;
}
a:active{
  color: inherit;
}

.tab {
  color:;
  background-color:;
  font-family: 'Roboto', sans-serif;
} 

a.active {
  color: green;
}

Run Code Online (Sandbox Code Playgroud)

<ul class="Menu">
	<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab1','tab1text')">Menu Item</a></li>
    <li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab2','tab2text')">Menu item</a></li>
    <li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab3','tab3text')">Menu Item</a></li>
	<li class="tab" style=""><a href="javascript:void(0)"  onclick="showContent(this,'tab4','tab4text')">Menu Item</a></li>
    </ul>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	102 次
最近记录：	9 年，2 月前