0

タブスタイルのナビゲーションメニューがあります。私の目標：

  1. ユーザーがタブXをマウスオーバーしたら、「tabActive」クラスをタブXに追加します。タブにすでに「tabActive」クラスがある場合は、それを削除します。
  2. Div"X"を表示

2番目の部分がダウンしていて、Javaコードはどのタブがホバーされているかを検出しますが、追加のクラスを正しく切り替えることができません。

これまでの私のコード：

HTML

<div id="subnav">
<div id="nav1" onmouseover="toggleDisplay('contentPayment')"  class="Payment myNav">
<a href="#">Payment</a></div>
<div id="nav2"  onmouseover="toggleDisplay('content-shipping')" class="Shipping myNav">
<a href="#">Shipping</a></div>
<div id="nav3" class="Warranty myNav">
<a href="#">Warranty</a></div>
<div id="nav4" class="Feedback myNav">
<a href="#">Feedback</a></div>
</div>

JAVASCRIPT

<script>

var divs = new Array();
divs.push("contentPayment");
divs.push("content-shipping");

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function toggleDisplay(id) {
for (var i = 0; i < divs.length; i++) {
    var item = document.getElementById(divs[i]);
    item.style.display = 'none';
}

//Now use the passed ID to show the div you wanted to show
var target = document.getElementById(id);
target.style.display = 'block';

if (id == "contentPayment") {
    var CurrentTab = document.getElementById("nav1");
    var AlreadyActive = hasClass("nav1", " tabActive");

    if (AlreadyActive == true) {
        CurrentTab.className = "Payment myNav";
    } else {

        CurrentTab.className += " " + "tabActive";
    }

}
}

</script>​

私の問題は何ですか？jQueryの方がはるかに簡単であることはわかっていますが、私はeBay用にコーディングしており、eBayでは許可されていません。tabActiveクラスを正しく切り替えるにはどうすればよいですか？

4

2 に答える 2

0

関数にいくつかの間違いがありtoggleDisplayます。私はあなたがこれをしたかったと思います：

var divs = new Array();
divs.push("contentPayment");
divs.push("content-shipping");

function toggleDisplay(id) {
    for (var i = 0; i < divs.length; i++) {
        var item = document.getElementById(divs[i]);
        item.style.display = divs[i] == id ? 'block' : 'none';
        item.className = item.className.replace(' tabActive', '');
    }

    var target = document.getElementById(id);
    target.className += " " + "tabActive";
}

function showAllTabs() {
    for (var i = 0; i < divs.length; i++) {
        var item = document.getElementById(divs[i]);
        item.style.display = 'block';
        item.className = item.className.replace(' tabActive', '');
    }
}​

マウスをそのタブの外に移動したときにすべてのタブを表示する必要があります。そうしないと、非表示のタブの上にマウスを置くことができなくなります。

<div id="subnav">
<div id="contentPayment" onmouseover="toggleDisplay('contentPayment')" onmouseout="showAllTabs()" class="Payment myNav">
<a href="#">Payment</a></div>
<div id="content-shipping"  onmouseover="toggleDisplay('content-shipping')" onmouseout="showAllTabs()" class="Shipping myNav">
<a href="#">Shipping</a></div>
<div id="nav3" class="Warranty myNav">
<a href="#">Warranty</a></div>
<div id="nav4" class="Feedback myNav">
<a href="#">Feedback</a></div>
</div>​​​​​​​​​​​​
于 2012-10-02T23:05:15.260 に答える
0

私はいくつかのpojadd、removeを書き、しばらく前にクラス関数を持っています。彼らはこのように見えました：

    hasClass: function( element, className ) {
        return ( element.className.search( new RegExp( '(^|\s)' + className + '($|\s)' ) ) !== -1 );
    },
    addClass: function( element, className ) {
        if ( element.className === '' ) {
            element.className = className;
        } else {
            // add class only if element does not already have the class
            if ( this.hasClass( element, className ) === false ) element.className += ' ' + className;
        }
    },
    removeClass: function( element, className ) {
        element.className = element.className.replace( new RegExp( '(^|\s)' + className + '($|\s)' ), ' ' ).replace( /^\s|\s$/, '' );
    },
于 2012-10-02T23:23:16.303 に答える