堆棧內存溢出
  簡體   English   中英

使用JavaScript將CSS類添加到動態ul li標簽

[英]Add CSS class to dynamic ul li a tag using javascript

 原文  2015-04-14 08:47:07  0   3    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 個解決方案

解決方案1
 2 已采納  2015-04-14 09:06:17

也許你的意思是這樣的： 

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

解決方案2
 1  2015-04-14 09:02:03

您不能將偽類添加到元素，只能添加實類。 偽類表示瀏覽器狀態的變化，例如:hover在元素上時:hover 。

因此，應使用.tabs1 ul li a.prompt.active而不是.tabs1 ul li a.prompt:active這樣的選擇器。 然后，您可以使用jQuery： 

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

將類添加到某些元素。

解決方案3
 -1  2015-04-14 09:06:58

我認為您正在尋找這樣的東西： 

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript使用數組將li添加到ul 如何使用JavaScript在ul標簽中創建li li img標簽？ 如何在ul li中嵌套的錨標記中添加活動類 添加動態自動播放到ul li <a>使用 javascript 將 css class 添加到標簽</a> 使用javascript將CSS類添加到td標簽 如何使用javascript在html中刪除和創建新的ul li標簽 使用javascript動態更新Ul Li（mootools 1.2） 如何將類添加到 ul li 將li動態添加到ul javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM