4

次のコードがあります。

<div id="nav">
  <ul>
    <li id="tabOne" class="first current"><a href="./CS1.html" target="SheetView">Page One</a></li>
    <li id="tabTwo"><a href="./CS2.html" target="SheetView">Page Two</a></li>
    <li id="tabThree"><a href="./CS3.html" target="SheetView">Page Three</li>
    <li id="tabFour"><a href="./CS4.html" target="SheetView">Page Four</a></li>
    <li id="tabFive"><a href="./CS5.html" target="SheetView">Page Five</a></li>
    <li id="tabSix"><a href="./CS6.html" target="SheetView">Page Six</a></li>
  </ul>

これにより、選択したページが「SheetView」という名前の iframe に読み込まれます。私がする必要があるのは、現在選択されていないオプションがクリックされたときに、JavaScript を使用してクラスを変更することです。CSS で現在のクラスが既にセットアップされていると言わざるを得ません。私はそれを引き起こす方法がありません。

<UL>そこにonlickイベントを追加して呼び出すことを考えましたonclick="Javascript:changeCurrent();"が、問題があります(実際には4つ):

  1. <ul onclick="JavaScript:changeCurrent();>イベントを開催する必要がある場所はありますか?
  2. 変更を実現するための結果として得られる JavaScript は何ですか?
  3. 最初のオプションをデフォルトで現在のオプションに設定するにはどうすればよいですか?
  4. 現在選択されているオプションがアクティブなリンクにならないようにする方法はありますか?

いくつかの異なる例を見つけましたが、それらを自分に合わせて調整することはできませんでした。どんな助けでも大歓迎です。

4

3 に答える 3

2

jQuery以外の応答が必要であると指定したので、適切に切り替える関数を次に示します。

function toggleNavSelected(el){
    var list = document.getElementById('nav').children[0];
    for(var i=0; i<list.children.length; i++){
        var cur = list.children[i];
        if(el==cur){
            cur.classList.add("current");
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
                return false;
            });
        } else {
            if(cur.classList.contains("current")){
                cur.classList.remove("current");
            }
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
            });
        }
    }
}

各LI（）にonclickハンドラーを追加するかonclick="toggleNavSelected(this);"、メニューがロードされた後に以下を実行します。

var list = document.getElementById('nav').children[0];
for(var i=0; i<list.children.length; i++){
    var el = list.children[i];
    el.firstChild.onclick = (function(){
        toggleNavSelected(this.parentElement);
    });
}

デモ： http： //jsfiddle.net/bWY7P/2/

（注：JSFiddleスクリプトにはわずかな違いがあります。これによりreturn false;、onclick関数にが追加され、実際にHREF属性に続くリンクなしで操作できるようになります。ライブコードでその行を使用しないでください）

説明：

この関数は、LI要素内の各要素を調べ#navます。
その要素が関数に渡される要素である場合、クラスが追加されます.current。
それ以外の場合は、クラスを削除します.current（存在する場合）。

a2番目の部分は、関数を呼び出す各要素のonclickイベントに関数をバインドし、toggleNavSelected()その親要素（li）を引数として渡します。

于 2012-12-09T00:47:03.703 に答える
0

1) アイテムをクリックしたときに現在選択されているクラスを変更したい場合は、onclick を li アイテムに入れます 2) ここで jquery を使用するのは非常に簡単です<script>。準備ができました！たとえばonclick="changeClass(this);"、<li>タグと通常の JavaScript ファイルまたはスクリプト タグで行うことができます。

function changeClass(this){
 $('#nav li').attr("class","");
 $(this).attr("class","current");
}

「現在」を使用するクラス名に置き換えます

3) すでに現行として設定されているはずです

4) :visited CSS セレクターを使用して、たどったリンクの色を変更します。例:

a:visited{
 color: #000000;
}
于 2012-12-09T00:39:27.753 に答える
0

まず、onclick属性からではなく、別のスクリプトからイベント ハンドラーを設定する必要があります。そのようにコードを繰り返したり、何かを 1 か所にまとめたりすることはありません。HTML も非常にきれいです。

jQueryを使用すると、次のように簡単になります。

var menuLinks = jQuery( '#nav a' );

menuLinks.on( 'click' function() {

    menuLinks.removeClass( 'active' );
    $( this ).addClass( 'active' );

} );

プレーンな JS でそれを行うこともできますが、いくつかのライブラリを使用すると、ブラウザーの非互換性の問題を回避できます。

于 2012-12-09T00:40:54.527 に答える