1

まず、私の質問が他の投稿と比較的似ている可能性があることに気付きましたが、他の投稿からコードを実装しようとしましたが、思い通りに動作させることができませんでした。私はJavascriptにかなり慣れていないので、ご容赦ください。

タブのように見えるように作成された個別の div 要素内のリンクの選択があります。別のリンクをクリックするたびに、アクティブなリンクの背景色が灰色から白に変わり、以前にアクティブだったリンクの背景色が白から灰色に変わります。

これが私の難問です。ページがロードされたときに背景が白くなるように、ホームリンクのデフォルト設定が必要です。

コードは次のとおりです。

    div.none {
    background-color: #cccccc;
    border-radius: 10px 10px 0px 0px;
    float: right;
    padding: 5px 15px 3px 15px;
    }

    div.active {
    background-color: white;
    border-radius: 10px 10px 0px 0px;
    float: right;
    padding: 5px 15px 3px 15px;
    }

    ...

    <script type="text/javascript">

    var selected = null;

    function toggleClass(x) {
        if (selected != null)
            selected.className = 'none';

        selected = x;
        x.className = 'active';
    }

    </script>

    ...

    <div class="none" id="t1"><a class="menu" href="#1.html" onclick="toggleClass(t1)" target="tabs">Book Online</a></div>
    <div class="none" id="t2"><a class="menu" href="#2.html" onclick="toggleClass(t2)" target="tabs"> Contact</a></div>
    <div class="none" id="t3"><a class="menu" href="#3" onclick="toggleClass(t3)" target="tabs">News</a></div>
    <div class="none" id="t4"><a class="menu" href="#4" onclick="toggleClass(t4)" target="tabs"> Mobile Recording</a></div>
    <div class="none" id="t5"><a class="menu" href="#5" onclick="toggleClass(t5)" target="tabs"> Recording Studios</a></div>
    <div class="none" id="t6"><a class="menu" href="#6" onload="toggleClass(t6)" onclick="toggleClass(t6)" target="tabs">Home</a></div>

ご協力いただける場合は、事前によろしくお願いいたします。

4

2 に答える 2

1

'active'ホーム リンクの初期クラスを に変更します...?

于 2012-05-29T17:18:18.213 に答える
0

ホームへのリンクがあるdivにアクティブなクラスを追加します（設計時）

<div class="none active" id="t6"><a class="menu" href="#6" onload="toggleClass(t6)" onclick="toggleClass(t6)" target="tabs">Home</a></div>​

ただし、他のタブが選択されたときにそのクラスを削除しactive、選択したタブにクラスを追加するには、JavaScriptにロジックを記述する必要があります。

于 2012-05-29T17:27:00.317 に答える