0

about セクションがあり、読みやすくするために 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';
}

ご覧のとおり、クリックしたときに各スタイルの を明示的にオフにする必要があるのは非常に面倒です。ただし、主な鍵は、各border-rightを異なる色にすることです。

これはすべてのjsfiddleですが、何らかの理由で実際にはJSを認識していません: http://jsfiddle.net/4CrhD/

追加のランダムな質問: HTML の whats の代わりに "mish()" をロードして、このページにリンクできますか?

4

3 に答える 3

1

最良の方法は、CSS を使用することです。親要素にクラスを追加して削除し、CSS に適切なルールを適用させます。

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

body.bout #bout{
   border-right : 3px solid blue,
}
于 2013-07-18T15:14:22.863 に答える
0

CSS でクラスを定義します: bout、mish、about、poli ... それぞれに必要な CSS を配置します。その後、JavaScriptで要素のクラスを変更するだけで（クラスを追加するか、クラスを変更するなど）、新しいCSSが適用されます

例

document.getElementById("bout").className = "otherclass"
于 2013-07-18T15:14:25.777 に答える