0

SOこれはこれまでの私のコードです:

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ブロックを非表示にしたいという考えですが、それを非表示にしていないようです...何かアイデアはありますか? 私は置き換えを使い始めましたが、それでも機能しませんでした。

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みんな。

4

4 に答える 4

1

私が理解しているように、あなたの目標は、 h4 要素にカーソルを合わせたときに関連する div タグを非表示にすることです。これを行う 1 つの方法は、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

className を正規表現で置き換える代わりに、新しいクラスを className 文字列に追加してみてください。また、getElementById() は単一の html インスタンスを返します。また、id 属性はドキュメント全体で一意である必要があります。

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