用JavaScript切換CSS類的簡單方法

Question

我很感謝迄今爲止得到的所有建議 - 謝謝！

我會盡力來形容好一點我想要做的事：

我想改用CSS類上的活動（上點擊）選項卡項目上的項目（製作高亮效果而其相關內容正在顯示）。

來自Vlad Nicula的JS小提琴http://jsfiddle.net/4YX5R/9/接近我想要實現的目標，但是我無法在我的代碼中使用它。

選項卡鏈接到單擊此選項卡時顯示在頁面上的內容。這部分工作正常。我只想在內容顯示時更改ContentLink項目的CSS樣式。

我還想保持ContentLink1的內容在頁面加載時可見，因爲它現在在代碼中，ContentLink1在頁面加載時擁有CSS .infoTabActive類。當ContentLink標籤沒有被點擊時，它應該有.infoTab類。

這是我到目前爲止有：

HTML：

<article class="grid-70 infoContainer"> 


     <a class="infoTab" id="aTab" href="javascript:show('a')">ContentLink1</a> 
     <a class="infoTab" id="bTab" href="javascript:show('b')">ContentLink2</a> 
     <a class="infoTab" id="cTab" href="javascript:show('c')">ContentLink3</a> 

    <div id="a"> 
    <p> Inhalt 1111111.</p></div>  



    <div id="b"> 
    <p>Inhalt 222222222 
    </p></div> 

    <div id="c"> 
    <p>Inhalt 33333333 
    <7p></div> 

    </article> 

的Javascript：

window.onload = function() { 
    document.getElementById("a").style.display = "block"; 
} 


function show(i) { 

    document.getElementById('a').style.display ="none"; 
    document.getElementById('b').style.display ="none"; 
    document.getElementById('c').style.display ="none"; 
    document.getElementById(i).style.display ="block"; 

} 

的選項卡樣式基本的CSS我想申請：

.infoTab { 
    text-decoration:none; 
    color:red; 
} 

.infoTabActive { 
    text-decoration:none; 
    color:yellow; 
} 

任何指針都會很贊泰德！

Answer 1

您可以使用DOM元素上的類屬性輕鬆切換類。

要更換現有的類使用

document.getElementById("Element").className = "ClassName"; 

同樣一類新增加exisiting類使用

document.getElementById("Element").className += "ClassName"; 

Answer 2

更改放映功能是這樣的：

function show(i) { 

    document.getElementById('a').style.display ="none"; 
    document.getElementById('a').className =""; 
    document.getElementById('b').style.display ="none"; 
    document.getElementById('b').className =""; 
    document.getElementById('c').style.display ="none"; 
    document.getElementById('c').className =""; 
    document.getElementById(i).style.display ="block"; 
    document.getElementById(i).className ="selected"; 

} 

Answer 3

我changed有點你的代碼，使它適合你的需求。 首先，將小提琴中的onload部分改爲no wrap。 然後，你需要隱藏在啓動每一個元素是這樣的：

window.onload = function() { 
    var list = document.getElementsByClassName("hide"); 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.display = "none"; 
    } 
} 

我添加了一個hide類來實現它。您的show功能運行良好。

Answer 4

我會做這樣的：

添加一個名爲.show類設置元素顯示塊。

然後切換類名。

這裏有一個JSFiddle

而且這裏有一個例子：

HTML

<article class="grid-70 infoContainer"> 

    <a class="infoTab" id="aTab" href="javascript:show('a')">Werbetexte</a> 
    <a class="infoTab" id="bTab" href="javascript:show('b')">Lektorate</a> 
    <a class="infoTab" id="cTab" href="javascript:show('c')">Übersetzung</a> 

    <div class="box" id="a"> 
     <div class="col1"> <p>Inhalt 1111111.</p></div>  
    </div> 

    <div class="box" id="b"> 
     Inhalt 222222222 
    </div> 

    <div class="box" id="c"> 
     Inhalt 33333333 
    </div> 

</article> 

的JavaScript

window.onload = function() { 
    show('a'); 
} 


function show(elm) { 

    // get a list of all the boxes with class name box 
    var shown = document.getElementsByClassName('box'); 

    // loop through the boxes  
    for(var i=0; i<shown.length; i++) 
    { 
     // set the classname to box (removing the 'show') 
     shown[i].className = 'box'; 
    } 

    // change the classname to box show for the element that was clicked 
    document.getElementById(elm).className = 'box show'; 

} 

CSS

.box { 
    display:none; 
} 

.box.show { 
    display:block; 
} 

Answer 5

我能想到的最簡單的方法是這樣的：http://jsfiddle.net/4YX5R/9/

基本上你不想聽聽每個元素。如果你這樣做，你會遇到新標籤的問題。如果你聽我的例子中的父元素，你可以添加新的標籤，而無需編寫更多的JavaScript代碼。

<a class="infoTab" data-target='a' id="aTab">Werbetexte</a> 

每個選項卡按鈕具有一個數據目標的屬性，將描述div來顯示作爲選項卡的內容。隱藏和顯示內容將通過CSS完成，而不是樣式 - 這是推薦的最佳實踐 - 。

tabs.addEventListener("click", function (ev) { 
    var childTarget = ev.originalTarget || ev.toElement; 
    ... 
} 

當點擊一個選項卡，我們要檢查一下從父事件偵聽器點擊了哪個元素，然後從中獲得數據的目標。我們使用這個作爲id選擇器來顯示新標籤。我們還需要參考活動的舊選項卡，以便我們可以隱藏它。

邏輯並不那麼複雜，因此您可以擁有任意數量的選項卡。我會爲此推薦jQuery，因爲事件委託可能無法在所有瀏覽器中使用當前代碼。

我希望這有助於:)