0

別の要素がクリックされたときに同じ名前の複数の要素を表示/非表示にする必要があります。 <span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
たとえば、クリックされたときに対応する値の要素が非表示になります。
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>

また、onclick=''HTMLでは使用できません。スクリプトに含める必要があります。href以外のタグにも属性を適用できません(これはMediaWiki用です)

いろいろな方法を試しましたが、うまくいかないようです。何か提案はありますか?

4

2 に答える 2

2

<span name>マークアップが無効です:またはのような属性は<span value>ありません。また、同じ を持つ複数の要素を持つことはできませんid。これはすべて、名前または ID で要素を取得しようとする試みを混乱させる可能性があります。代わりにaを使用しclassてください。取得したのはページの他の部分へのリンクであるため、それらを内部リンクとしてマークアップするのが賢明と思われます。CSS を使用して、リンクのように見えないようにいつでもスタイルを設定できます。

<a class="showhide" href="#one">Click to hide one</a>
<a class="showhide" href="#two">Click to hide two</a>

<div id="one">One</div>
<div id="two">Two</div>

<script type="text/javascript">
    for (var i= document.links.length; i-->0;) {
        var link= document.links[i];
        if (link.className=='showhide') {
            var div= document.getElementById(link.hash.substring(1));
            Toggler(link, div, true);
        }
    }

    function Toggler(toggler, togglee, state) {
        toggler.onclick= function() {
            state= !state;
            togglee.style.display= state? 'block' : 'none';
            return false;
        }
    }
</script>
于 2010-07-07T20:19:14.803 に答える
0

ページの読み込み時に、最初にその名前のすべての要素にイベントを追加して、非表示/表示を切り替えます。要素がクリックされると、すべての要素をループして、現在の状態に応じてスタイルを変更しdisplay:noneますdisplay:block。現在の状態を識別するには、属性値を見つけるかdisplay、クラスを追加/削除します。

于 2010-07-07T20:10:02.583 に答える