Question

我正在尝试将一个活动类添加到列表元素中，并且无法解决为什么此方法不起作用任何指导都将非常感谢。请参阅下面的代码。

这是HTML

[Unit]
Description=WSO2 API Manager

[Service]
Environment= JAVA_HOME=/usr/lib/jvm/java-8-oracle
WorkingDirectory=/opt/wso2/wso2am-2.0.0
User=wso2
ExecStart=/bin/bash /opt/wso2/wso2am-2.0.0/bin/wso2server.sh
ExecStop= /bin/bash -c '/opt/wso2/wso2am-2.0.0/bin/wso2server.sh stop'
ExecReload=/bin/bash -c '/opt/wso2/wso2am-2.0.0/bin/wso2server.sh restart'

[Install]
WantedBy=multi-user.target

带有类的CSS

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

和Javascript功能

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

.active {
color: #00ffff;
}

这是一个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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您已在锚标记<a>中添加了onclick功能，并且您要将活动课程设置为<a>，因此请在<li>标记而不是<a>上添加onclick功能。

将类添加到列表元素

5 个答案: