的JavaScript的onmouseover隐藏一个div块

Question

所以这是我到目前为止的代码：

JS：

 <script type="text/javascript"> 
      function Hide(srcField) 
      { 
       var x = srcField.getAttribute('name'); 
       var string = new RegExp("hide_ID",'gi'); 

       switch (x) 
       { 
        case "1": 
        var dataRows= document.getElementsByID("obrazovanje"); 
        alert (dataRows[0].innerHTML); 
        dataRows[0].className.replace('',string); 
        break; 
        case "2": 
        var dataRows= document.getElementsByID("rad_iskustvo"); 
        dataRows[0].className.replace('',string); 
        break; 
        case "3": 
        var dataRows= document.getElementsByID("strani_jezici"); 
        dataRows[0].className.replace('',string); 
        break; 
        case "4": 
        var dataRows= document.getElementsByID("znanja_vjestine"); 
        dataRows[0].className.replace('',string); 
        break; 
        case "5": 
        var dataRows= document.getElementsByID("osobine_interesi"); 
        dataRows[0].className.replace('',string); 
        break; 
       } 
      } 
    </script> 

CSS：

.hide_ID, 
{ 
display:none 
} 

HTML：

<a name="1"><h4><span name="1" onmouseover="Hide(this)">OBRAZOVANJE:</span></h4></a> 

    <div ID="obrazovanje"> 
    <ul> 
    <li>2001.-2005. elektrotehnicar</li> 
    <li>2009.-2012. racunarstvo</li> 
    </ul> 
    </div> 

的想法当我悬停时，我想隐藏div块超过h4的标题，但它似乎并没有隐藏它......任何想法？ 我开始使用替换，但它仍然没有工作，在此之前，它只是'dataRows [0] .className =“hide_ID”'，但也没有工作。

EDIT1：

，所以我改变了JS到：

   var x = srcField.getAttribute('name'); 

       switch (x) 
       { 
        case "1": 
        var dataRow= document.getElementByID("obrazovanje"); 
        dataRow.className += "hide_ID"; 
        break; 

的JS的其余部分也编辑了，但我并没有觉得有必要将其粘贴全部） ，但仍没有结果。

也试图将display:none更改为display:block但现在结果。

EDIT2：

的JS现在看起来是这样的：

 function Hide(id) 
      { 
       switch (id) 
       { 
        case "obrazovanje": 
        var dataRow= document.getElementByID("obrazovanje"); 
        if (dataRow.className.indexOf('hide_ID') == -1) dataRow.className += ' hide_ID'; 
        else dataRow.className = 'obrazovanje'; 
        break; 
... 

和HTML是：

<a name="1"><h4 class="menu" onmouseover="Hide('obrazovanje')">OBRAZOVANJE:</h4></a> 

    <div ID="obrazovanje" class="content"> 
    <ul> 
    <li>2001.-2005. elektrotehnicar</li> 
    <li>2009.-2012. racunarstvo</li> 
    </ul> 
    </div> 

，仍然它不会让步......

决赛：

这工作：

JS：

<script type="text/javascript"> 
     function Hide(id) 
      { 
       switch (id) { 
         case 1: 
          document.getElementById("1").className = "hide_ID"; 
          break; 
         case 2: 
          document.getElementById("2").className = "hide_ID"; 
          break; 
         case 3: 
          document.getElementById("3").className = "hide_ID"; 
          break; 
         case 4: 
          document.getElementById("4").className = "hide_ID"; 
          break; 
         case 5: 
          document.getElementById("5").className = "hide_ID"; 
          break; 
        } 

      } 

     function Show(id) 
      { 
       switch (id) { 
        case 1: 
         document.getElementById("1").className = "1"; 
         break; 
        case 2: 
         document.getElementById("2").className = "2"; 
         break; 
        case 3: 
         document.getElementById("3").className = "3"; 
         break; 
        case 4: 
         document.getElementById("4").className = "4"; 
         break; 
        case 5: 
         document.getElementById("5").className = "5"; 
         break; 
      } 
     } 
    </script> 

HTML：

<a name="1_a"><h4 class="menu" onmouseover="Hide(1)" onmouseout="Show(1)">OBRAZOVANJE:</h4></a> 

    <div ID="1" class="content"> 
    <ul> 
    <li>2001.-2005. elektrotehnicar</li> 
    <li>2009.-2012. racunarstvo</li> 
    </ul> 
    </div> 

CSS：

.hide_ID 
{ 
display:none 
} 

THX的家伙。

Answer 1

试试这个。并按照您的要求更改开关盒语句。

switch (x) { 
     case "1": 
      document.getElementById("obrazovanje").className += "hide_ID"; 
      break; 
     case "2": 
      document.getElementById("rad_iskustvo").className += "hide_ID"; 
      break; 
     case "3": 
      document.getElementById("strani_jezici").className += "hide_ID"; 
      break; 
     case "4": 
      document.getElementById("znanja_vjestine").className += "hide_ID"; 
      break; 
     case "5": 
      document.getElementById("osobine_interesi").className += "hide_ID"; 
      break; 
    } 

这种风格

.hide_ID 
{ 
display:none; 
} 

Answer 2

，如果你可以使用jQuery，只需使用$("#divname").addClass("hide_ID");

Answer 3

，而不是具有reg EXP尝试追加新类的className字符串替换类名的。 也getElementById（）返回单个的html实例。并且id属性对于整个文档也必须是唯一的。

var dataRows= document.getElementById("obrazovanje"); 
dataRows.className += " hide_ID" 

Answer 4

据我所知，您的目标是在h4元素悬停时隐藏关联的div标记。一种方法是使用javascript，css和命名约定的组合。考虑...

<script type="text/javascript"> 
function Hide(id) { 
    var elt = document.getElementById('obrazovanje'); 
    if (elt.className.indexOf('hide_ID') == -1) { 
     elt.className += ' hide_ID'; // from your css example 
    } else { 
     elt.className = ''; 
    } 
} 
/* In jQuery as mentioned in other answers it's even easier (and offers some other cool ways too (highly recommended if it fits your purposes) */ 
function jHide(id) { 
    $('#' + id).toggleClass('hide_ID'); 
} 
</script> 

<h4 class="menu" onmouseover="Hide('obrazovanje');">obrazovanje</h4> 

... 
<div id="obrazovanje" class="content"> 
</div>