CSS 클래스 추가

Question

탭 스타일의 탐색 메뉴가 있습니다. 내 목표는 : 사용자 mousovers 탭 X. 탭의 X에 "tabActive"클래스를 추가하면 탭이 이미 "tabActive"클래스가있는 경우,

1. , 다음을 제거
2. 쇼 사업부 "X"

두 번째 부분이 아래쪽에 있는데, 내 자바 코드가 어떤 탭을 가리키고 있는지 감지하지만 올바르게 추가 분류를 가져올 수 없습니다. 지금까지

내 코드 :

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 클래스가 올바르게 토글되도록하려면 어떻게합니까?

Answer 1

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>​​​​​​​​​​​​ 

Answer 2

일부 poj를 추가하고 제거하고 클래스 기능을 가지고 있습니다. 그들은이처럼 보였다 :

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$/, ''); 
    },