使用Javascript更有效地改變樣式的方法？

Question

我有一個關於部分，我將其分成多個由JavaScript加載的部分，以便於閱讀。 我希望側面導航為此具有不同的背景顏色，如果它們都懸停在上面並且如果它是所選擇的那個，並且還要為每個選項設置具有唯一顏色的邊框。 我有沒有問題，但我只是想知道是否有一種更有效的方法來做到這一點，而不是我現在的方式。

簡而言之，HTML：

<nav>   
            <p id="bout" onclick="bout()">About Us</p>
            <p id="mish" onclick="mish()">Our Mission</p>
            <p id="team" onclick="team()">The Team</p>
            <p id="how" onclick="how()">How It Works</p>
            <p id="poli" onclick="poli()">Policies</p>
        </nav>

        <div class="actual">

            <div id="about">
            <h2>About Us</h2>
            <p>We are a conglomerate of hoodlums.</p>
            </div>

        </div><!-- end actual -->

和JS：

function bout() {
    document.getElementById("about").innerHTML= '<h2>About Us</h2><p>We are a conglomerate of hoodlums.</p>';
    document.getElementById("bout").style.borderRight='3px solid red';
    document.getElementById("mish").style.borderRight='none';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='ghostwhite';
    document.getElementById("mish").style.backgroundColor='bisque';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';

}

function mish() {
    document.getElementById("about").innerHTML = '<h2>Mission</h2><p>Our mission is to rid the world of dust bunnies.</p>';
    document.getElementById("bout").style.borderRight='none';
    document.getElementById("mish").style.borderRight='3px solid orange';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='bisque';
    document.getElementById("mish").style.backgroundColor='ghostwhite';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';
}

正如您所看到的，在單擊時必須明確關閉每個樣式是非常麻煩的。 主要關鍵是讓每個邊框右邊都是不同的顏色。

這是一個jsfiddle與整個事情，但由於某種原因，它實際上並沒有承認JS： http ： //jsfiddle.net/4CrhD/

其他隨機問題：是否可以使用加載的內容鏈接到此頁面，例如，我是否可以使用“mish（）”鏈接到此頁面而不是HTML中的內容？

Answer 1

最好的方法是使用CSS。 添加刪除父元素上的類，並讓CSS應用正確的規則。

body.mish #bout{
   border-right : 3px solid red,
}

body.bout #bout{
   border-right : 3px solid blue,
}

Answer 2

是。 你需要在html和樣式之間划分。 使用 CSS ！

然后你可以改變樣式，例如使用jQuery.css（） ：

$('#mish').css({
   'border-right':    '3px solid orange',
   'background-color':'ghostwhite'
});

當然，您可以在類中定義樣式。 類使用類描述所有元素的樣式定義。

nav > p {
    border-right: none;
    background-color: bisque;
}

.active {
    border-right: 3px solid red;
    background-color: ghostwhite;
}

如果單擊一個按鈕，您可以使用以下命令動態添加和刪除類：

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')
});

因為代碼重復很糟糕（我不喜歡設置完整的innerHTML），所以你可以創建一個動態頁面，如：

pages = {
   'bout': {
       'id':       'about',
       'headline': 'About Us',
       'body':     'We are a conglomerate of hoodlums.'
    }
}

將上面的代碼擴展為

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')

   if (pages[$(this).attr('id')]) {
       var page = pages[$(this).attr('id')];
       $('.actual').first().empty();
       var container = $('<div>', { 'id': page.id });
       container.append($('<h2>', { 'html': page.headline })); 
       container.append($('<p>', { 'html': page.body })); 
       $('.actual').first().append(container);
   }
}); 

看看這個jsfiddle的工作示例

---

解決你的“隨機”問題

其他隨機問題：是否可以使用加載的內容鏈接到此頁面，例如，我是否可以使用“mish（）”鏈接到此頁面而不是HTML中的內容？

如果您想要指向此頁面的鏈接，您可以解析window.location.hash對象並鏈接到page.html#mish等鏈接。

---

要設置默認的“頁面”，我們擴展我們的pages對象以提供這樣的信息： http ： //jsfiddle.net/Eu36g/6/

Answer 3

在CSS中定義你的類：bout，mish，about，poli ...為每個人放置你想要的CSS。 在那之后，在javascript中，你只需要更改元素的類（添加類或更改類，或者其他），新的CSS將適用

例

document.getElementById("bout").className = "otherclass"