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>

我的想法是，當我將鼠標懸停在h4上的標題上時，我想隱藏div塊，但它似乎沒有隱藏它......任何想法？ 我開始使用替換，但它仍然無法工作，之前它只是'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 to 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
}

大家好

Answer 1

據我所知，你的目標是在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>

Answer 2

試試這個吧。 並根據您的要求更改switch case語句。

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 3

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

Answer 4

而不是用reg exp替換className嘗試將新類附加到className字符串。 getElementById（）也返回單個html實例。 並且id屬性對於整個文檔也必須是唯一的。

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