將類添加到列表元素

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>

和CSS一起上課

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

.active {
color: #00ffff;
}

和Javascript功能

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

這是一個JSfiddle以及https://jsfiddle.net/wxjop98f/1/

我無法弄清楚為什么這不起作用，因為各種教程都說明了這種方法。 非常感謝您提供的任何幫助。

Answer 1

幾個問題：

你需要確保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"); }

 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; }

 <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>

Answer 2

您缺少函數的{}：

function showContent(obj, content, text){
    obj.className += " active";
}

https://jsfiddle.net/BradChelly/wxjop98f/4/

Answer 3

只需更改您的javascript如下，您只是錯過了大括號

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

Answer 4

 function showContent(obj, content, text) { if (obj.className.indexOf("active") < 0) obj.className += " active"; }

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

 <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>

Answer 5

你已經在錨標簽<a>放入了onclick函數，並且你將活動類放在<a>所以請在<li>標簽而不是<a>上放置onclick函數。

將類添加到列表元素

問題描述

5 個解決方案

解決方案1
7 已采納 2016-12-28 12:45:07

解決方案2
1 2016-12-28 12:44:31

解決方案3
1 2016-12-28 13:05:10

解決方案4
0 2016-12-28 12:43:43

解決方案5
0 2016-12-28 12:46:59

將類添加到列表元素

問題描述

5 個解決方案

解決方案1 7 已采納 2016-12-28 12:45:07

解決方案2 1 2016-12-28 12:44:31

解決方案3 1 2016-12-28 13:05:10

解決方案4 0 2016-12-28 12:43:43

解決方案5 0 2016-12-28 12:46:59

解決方案1
7 已采納 2016-12-28 12:45:07

解決方案2
1 2016-12-28 12:44:31

解決方案3
1 2016-12-28 13:05:10

解決方案4
0 2016-12-28 12:43:43

解決方案5
0 2016-12-28 12:46:59