javascript - 使用javascript将CSS类添加到动态ul li a标签

Question

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

这是我的 ul li 的 html:

<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 在这些函数中添加类的操作。

所有 a 标签的 CSS 类是:

<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

也许你的意思是:

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