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更改为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>

仍然不会让步......

FINAL：

这有效：

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 guys。

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"

javascript onmouseover隐藏div块

4 个答案: