0

我有一个标签式导航菜单。我的目标：

  1. 一旦用户鼠标悬停选项卡 X。将“tabActive”类添加到选项卡 X，如果选项卡已经具有“tabActive”类，则将其删除
  2. 显示分区“X”

我有第二部分，我的 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 编码，他们不允许这样做。如何让我的 tabActive 类正确切换？

4

2 回答 2

0

不久前，我写了一些 poj add、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 回答
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 回答