0

8 つの画像入力アイコンで構成されるメニューがあります。クリックしたアイコンを青くするためにJavascriptを使用しました。ただし、別のアイコンをクリックすると通常に戻る必要があります。これに対する純粋なJavaScriptソリューションはありますか?

これは、ボタンを青くする方法の例です..

ボタンは、クリック可能なアイコンとその下のラベルで構成されています。下のラベルは、クリックすると青に変わります。

どのボタンがクリックされたかを判断するためにすべてのボタンを照会し、クリックされたボタンの ID を使用して、アイコンの青の下のテキストと、ボタンがリンクしているページのセクションのタイトルを変更しました。これが、ID を一致させた理由です。アイコンのセクションのタイトルに。

下のラベルは、以下に示すように、それを囲んだスパンのスタイル プロパティにアクセスすることで簡単に変更されます...

this.id.search("routenav");
       if(this.id.match("routenav")) {
            document.getElementById("routetitle").style.color = 'blue';

            var b = document.getElementById("b");
            b.style.color = 'blue'
            b.style.fontSize = '30px';

        }
4

1 に答える 1

0

以下の HTML に似たナビゲーションがあると仮定した単純な jQuery ソリューションを次に示します。これは、アンカータグ () などに使用するように簡単に構成できます。

http://jsfiddle.net/Y5jxh/

HTML

<ul id="nav">
     <li>one</li>
     <li>two</li>
     <li>three</li>
</ul>

CSS

ul, li {
     margin: 0;
     padding: 0;
     list-style: none;
     font-size: 25px;
}
li {
     font-size: 25px;
     cursor: pointer;
}
.active {
     color: blue;
}

jQuery

$('#nav').on('click', 'li', function() {

    /* remove 'active' class from all possible navigation elements */
    $(this).siblings().removeClass('active');

    /* add 'active' class to current element */
    $(this).addClass('active');

});
于 2013-07-29T17:49:18.093 に答える