動態addClass（）從選擇框

希望這不是一個重複的問題，但如果是，只需發佈鏈接作爲您的迴應。動態addClass（）從選擇框

我需要創建一個網站，選擇下拉菜單作爲頂部有幾個選項，以及幾個div下面有幾個鏈接。

根據您在選擇框中選擇哪個選項，正確標記的鏈接將突出顯示。

這裏的基本結構：

<select> 
    <option value="o1">Option 1</option> 
    <option value="o2">Option 2</option> 
    <option value="o3">Option 3</option> 
    <option value="o4">Option 4</option> 
</select> 

<div> 
    <a href="#" class="o1">Link A</a> 
    <a href="#" class="o2">Link B</a> 
    <a href="#" class="o3">Link C</a> 
    <a href="#" class="o4">Link D</a> 
</div> 

<div> 
    <a href="#" class="o1">Link A</a> 
    <a href="#" class="o2">Link B</a> 
    <a href="#" class="o3">Link C</a> 
    <a href="#" class="o4">Link D</a> 
</div>

我知道這個過程將包括.addClass（）.removeClass（）和.change（），我只是不知道如何把它放在一起，以便它可以在所有div上動態工作。

在此先感謝。

來源

2012-05-31 Murphy1976

鏈接，以便：

$('select').on('change', function(){ 
    var klass = this.value; 
    $('.highlight').removeClass('highlight'); 
    $('a.'+klass).addClass('highlight'); 
});

來源

2012-05-31 19:25:37

$('select').on('change', function() {  // binding change event for select 
              // fires when select box change 

    var mycls = this.value;     // getting the value of select 
              // box after change 



    $('a:not(".'+ mycls +'")')    // select <a> tag that has no 
              // class same as select box value 
       .removeClass('some_class'); // and remove highlight 
              // class form that <a> 

    $('a.' + mycls)       // select the <a> with class 
              // same as select box value 
      .addClass('some_class');  // and adding highlight class 
});

爲了使最初的鏈接亮點只是觸發最初的改變

$('select').on('change', function() { 
    var mycls = this.value; 
    $('a:not(".'+ mycls +'")').removeClass('some_class'); 
    $('a.' + mycls).addClass('some_class'); 
}).change(); // here the initial change event triggered

DEMO

來源

2012-05-31 19:25:08 thecodeparadox

@ Murphy1976我在回答中添加了必要的註釋，您不需要將其添加到您的代碼中。簡單地添加。 – thecodeparadox

好像你已經回答了這個問題在最後一句話，但她e就是下一步。

您必須將.change（）事件處理程序添加到您的選擇框。

$("select").change(function() { 

});

然後當，即使發生讀取所選值，因爲你將它們命名爲相同的樣式應用於該類。

$("select").change(function() { 
    $("." + $(this).attr("value")).css("background", "#ccc"); 
}

來源

2012-05-31 19:27:50 corymathews

你需要刪除課程，否則它將保持highlited –

假設你給選擇列表一個id例如SELECTID 和你有.highlight稱爲類，你可以這樣做：

$('#selectid').change(function(){ 

    $('*').removeClass('highlight'); 

    $('.'+$(this).val()).addClass('highlight'); 

});

我沒有測試以上，但它應該把你在正確的軌道上。

來源

2012-05-31 19:30:27 ctdeveloper

動態addClass（）從選擇框

回答

相關問題