0

onClick を使用して表示/非表示を切り替えるスクリプトがあります。うまく表示/非表示にできますが、表示/「他のすべてを非表示」にすることはできません。そのため、本当に 1 つだけが必要なときに、開いているコンテナーの束が得られます。

Javascript:

<script>
    function showfields(fields){
        if(document.getElementById(fields).style.display=='none'){
            document.getElementById(fields).style.display='block';
        }
        else{
            document.getElementById(fields).style.display = 'none';
        }
    }
</script>

HTML:

<div id="hidden" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something2</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something3</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something4</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>

ありがとう

4

4 に答える 4

3

これをjQueryでタグ付けしたので、それはオプションだと思います：

function showfields(fields){
  $('.steps').hide()
  $('#' + fields).show();
}
于 2012-06-05T16:32:57.893 に答える
1

編集: これはあなたがやろうとしていることですか: http://jsfiddle.net/Rykus0/67cjt/2/ (jQueryなし)

（ps - これはもっとうまくできる）

あなたの質問はあまり明確ではありませんが、最初の div 以外のすべてを非表示にしてページを開始する必要があると思います。

その場合、style="display:none;"最初に表示したくない要素を設定するだけで問題ありません (クラスを使用することもできます)。

また、hidden3 のonclick呼び出しを変更して、hidden4 からshowfields('hidden4')onclick イベントを削除する必要があると思います

于 2012-06-05T16:36:37.440 に答える
0

jqueryを使用せずに.This piece of javascript may help you

  <script>
        function showfields(fields){
          for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
          { if(document.body.getElementsByTagName("*")[i].id==field)
            {
            document.body.getElementsByTagName("*")[i].style.display='block';
            }
            else{
                 document.body.getElementsByTagName("*")[i].style.display='block';

            }
        }
    </script>
于 2012-06-05T16:39:09.230 に答える
0

ポルコさんに同意

別のオプションは、クラスをフラグとして使用することです。たとえば、

function showFields(fields){
     $(fields).each(function(){
         if($(this).hasClass('visible'){
              $(this).hide();
         }
         else {
              $(this).show();
         }
     }
}
于 2012-06-05T16:38:21.710 に答える