使用 javascript 添加 CSS class 到动态 ul li a 标签

Question

我在 div 中有一个 ul li 列表，我想在其上添加 CSS class 基于标签的点击。

这是我的html ul li:

<div class="tabs1">
    <ul>
       <li class="active"><a href="javascript:;" onclick="change_program()" class="program active" title="Program"></a></li>
       <li><a href="javascript:;" onclick="change_sd()" class="sd" title="Discriminative Stimulus"></a></li>
       <li><a href="javascript:;" onclick="change_response()" class="response" title="Response"></a></li>
       <li><a href="javascript:;" onclick="change_enforces()" class="enforces" title="Reinforcers"></a></li>
       <li><a href="javascript:;" onclick="change_sro()" class="sro" title="Short Range Objective"></a></li>
       <li><a href="javascript:;" onclick="change_lro()" class="lro" title="Long Range Objective"></a></li>
       <li><a href="javascript:;" onclick="change_prompt()" class="prompt" title="Prompt"></a></li>
     </ul>
  </div>

以下是调用这些 a 标签的函数：

function change_program(){ 
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="block";
    document.getElementById("trial").style.display="none";
    document.getElementById("sd").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("response").style.display="none";
    document.getElementById("enforces").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("lro").style.display="none";
    document.getElementById("prompt").style.display="none";

}
function change_sd(){
    document.getElementById("sd").style.display="block";
    document.getElementById("program").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("response").style.display="none";
    document.getElementById("enforces").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("lro").style.display="none";
    document.getElementById("prompt").style.display="none";
}
function change_response(){
    document.getElementById("response").style.display="block";
    document.getElementById("sd").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("enforces").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("lro").style.display="none";
    document.getElementById("prompt").style.display="none";
}
function change_enforces(){
    document.getElementById("enforces").style.display="block";
    document.getElementById("response").style.display="none";
    document.getElementById("sd").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("lro").style.display="none";
    document.getElementById("prompt").style.display="none";
}   
function change_sro(){
    document.getElementById("sro").style.display="block";
    document.getElementById("enforces").style.display="none";
    document.getElementById("response").style.display="none";
    document.getElementById("sd").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("lro").style.display="none";
    document.getElementById("prompt").style.display="none";
}
function change_lro(){

    document.getElementById("lro").style.display="block";
    document.getElementById("enforces").style.display="none";
    document.getElementById("response").style.display="none";
    document.getElementById("sd").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("prompt").style.display="none";
}
function change_prompt(){
    document.getElementById("prompt").style.display="block";
    document.getElementById("enforces").style.display="none";
    document.getElementById("response").style.display="none";
    document.getElementById("sd").style.display="none";
    document.getElementById("trial").style.display="none";
    document.getElementById("program").style.display="none";
    document.getElementById("bcs_sub").style.display="none";
    document.getElementById("graphs").style.display="none";
    document.getElementById("summary").style.display="none";
    document.getElementById("sro").style.display="none";
    document.getElementById("lro").style.display="none";
}

我只是想使用 javascript 在这些函数中添加 classes 的操作。

CSS class for all a tags are:

<style>
.tabs1 ul li a.program:active {
  width: 129px;
  background: url(../images/program_steps_h.png) no-repeat;
}
.tabs1 ul li a.sd:active {
  width: 129px;
  background: url(../images/program_steps_sd.png) no-repeat;
}
.tabs1 ul li a.response:active {
  width: 129px;
  background: url(../images/program_steps_response.png) no-repeat;
}
.tabs1 ul li a.enforces:active {
  width: 129px;
  background: url(../images/program_steps_enforces.png) no-repeat;
}
.tabs1 ul li a.sro:active {
  width: 129px;
  background: url(../images/program_steps_sro.png) no-repeat;
}
.tabs1 ul li a.lro:active {
  width: 129px;
  background: url(../images/program_steps_lro.png) no-repeat;
}
.tabs1 ul li a.prompt:active {
  width: 129px;
  background: url(../images/program_steps_prompt.png) no-repeat;
}
</style>

Answer 1

您不能向元素添加伪classes，只能添加真实的classes。 pseudo-classes 表示浏览器状态的变化，例如:hover 当鼠标悬停在元素上时。

因此，您应该使用 .tabs1 ul li a.prompt.active 而不是像 .tabs1 ul li a.prompt:active 这样的选择器。然后你可以使用 jQuery:

$(selector).addClass("active");

将 class 添加到某些元素。

Answer 2

也许你是这个意思：

$(function () { // on load of page
    // on a click on any link in the UL
    $("div.tabs1>ul>li>a").on("click", function (e) { 
        e.preventDefault(); // cancel click
        // remove all active from all elements under UL
        $(this).closest("ul").find(".active").removeClass("active"); 
        // add active to the clicked
        $(this).addClass("active");
        // add active to the clicked's parent LI 
        $(this).parent().addClass("active");
        // hide all target divs
        $(".toggleDiv").hide();
        // show the one with ID= contents of data-target of clicked link
        $("#"+$(this).data("target")).show();
    }).first().click(); // click the first on load
});

使用

<div class="tabs1">
    <ul>
        <li><a href="#" data-target="program" class="program" title="Program">Program</a></li>
        <li><a href="#" data-target="sd" class="sd" title="Discriminative Stimulus">SD</a></li>
        <li><a href="#" data-target="response" class="response" title="Response">Response</a></li>
        <li><a href="#" data-target="enforces" class="enforces" title="Reinforcers">Enforces</a></li>
        <li><a href="#" data-target="sro" class="sro" title="Short Range Objective">SRO</a></li>
        <li><a href="#" data-target="lro" class="lro" title="Long Range Objective">LRO</a></li>
        <li><a href="#" data-target="prompt" class="prompt" title="Prompt">PROMPT</a></li>
    </ul>
</div>

<div id="sro" class="toggleDiv">SRO....</div>
<div id="sd" class="toggleDiv">SD...</div>

$(function () {
    $("div.tabs1>ul>li>a").on("click", function (e) {
        e.preventDefault(); // cancel click
        $(this).closest("ul").find(".active").removeClass("active");
        $(this).addClass("active");
        $(this).parent().addClass("active");
        $(".toggleDiv").hide();
        $("#"+$(this).data("target")).show();
    }).first().click(); // click the first on load
});

.toggleDiv { display:none }
li.active { background-color:red } 
.active { color:yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs1">
    <ul>
        <li><a href="#" data-target="program" class="program" title="Program">Program</a></li>
        <li><a href="#" data-target="sd" class="sd" title="Discriminative Stimulus">SD</a></li>
        <li><a href="#" data-target="response" class="response" title="Response">Response</a></li>
        <li><a href="#" data-target="enforces" class="enforces" title="Reinforcers">Enforces</a></li>
        <li><a href="#" data-target="sro" class="sro" title="Short Range Objective">SRO</a></li>
        <li><a href="#" data-target="lro" class="lro" title="Long Range Objective">LRO</a></li>
        <li><a href="#" data-target="prompt" class="prompt" title="Prompt">PROMPT</a></li>
    </ul>
</div>

<div id="sro" class="toggleDiv">SRO....</div>
<div id="sd" class="toggleDiv">SD...</div>

Answer 3

我想你正在寻找这样的东西:

<p id = "go-for-it">Hi !</p>

<script type="text/javascript">
    document.getElementById("go-for-it").className = "hi-buddy";
</script>

使用 javascript 添加 CSS class 到动态 ul li a 标签

Add CSS class to dynamic ul li a tag using javascript

html

javascript

css

jquery

css-selectors