使用javascript将CSS类添加到动态文件中

时间：2015-04-14 08:47:07

标签： javascript jquery html css css-selectors

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

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

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

所有标签的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>

3 个答案:

答案 0 :(得分：3)

也许你的意思是：

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

＆＃13;
＆＃13; 
$(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
});
＆＃13; 
.toggleDiv { display:none }
li.active { background-color:red } 
.active { color:yellow }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您不能将伪类添加到元素，只添加实际类。伪类表示浏览器状态的变化，例如当鼠标悬停在元素上时:hover。

因此，您应使用.tabs1 ul li a.prompt:active代替.tabs1 ul li a.prompt.active之类的选择器。然后你可以使用jQuery：

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

将类添加到某些元素。

答案 2 :(得分：-1)

我认为你正在寻找这样的东西：

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

<script type="text/javascript">
    document.getElementById("go-for-it").className = "hi-buddy";
</script>
相关问题
最新问题