0

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

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"' 但那也不起作用。

编辑1：

所以我将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

编辑2：

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
}

谢谢各位。

4

4 回答 4

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>
于 2012-04-11T11:48:19.933 回答
1

试试这个。并根据您的要求更改 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;
}
于 2012-04-11T12:20:10.443 回答
0

如果您可以使用 jQuery，请使用$("#divname").addClass("hide_ID");

于 2012-04-11T11:30:34.733 回答
0

而不是用 reg exp 替换 className 尝试将新类附加到 className 字符串。getElementById() 也返回单个 html 实例。并且 id 属性对于整个文档必须是唯一的。

var dataRows= document.getElementById("obrazovanje");
dataRows.className += " hide_ID"
于 2012-04-11T11:35:16.377 回答