0

こんにちは、5 つの div を持つスタンドアロンの Web ページで動作する JavaScript があります。オプションを選択すると、ドロップダウン選択に基づいて div が表示され、他のものが非表示になります。基本的に、コードが行うことは、セクターがドロップダウンで選択すると、対応する DIV が表示されます (パブなど)。

私が抱えている問題は、これを機能させたい Web ページにあります。多くの Div タグがあり、ページが読み込まれると、ページ上のすべての Div が非表示になります。明らかに、これは望ましくありません。

どんな助けでも大歓迎です

ページの読み込み時にすべての div を非表示にするコードは次のとおりです。

$('div').not(name).hide();

この問題を解決する方法はありますか?

JS

<script>

    $(document).ready(function () {

        function showTab( name ) 
        {
        name = '#' + name;

        $('div').not(name).hide();

        $(name).show();
    }

    $('#dropdown').change( function() {

        showTab( $( this ).val() );
    });

    showTab( $('#dropdown').val() );

});

HTML

<form>
          <p>
          <select id="dropdown" name="dropdown">
              <option value="Pub-Chains" selected="selected">Pubs </option>
              <option value="Councils">Councils </option>
              <option value="Property">Property </option>
              <option value="Various">Various </option>
              <option value="Universitys">Universitys </option>
          </select>
          </p>
     </form>

私のDivはそのように命名されています

Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
4

5 に答える 5

1 
$(document).ready(function () {
  var ddl = $("#dropdown");
  $('#' + ddl.val()).show().siblings().hide();
  ddl.change(function () {
  $('#' + $(this).val()).fadeIn().siblings().hide();
 });
});

デモを見る

于 2013-01-16T12:16:16.363 に答える
1

ターゲット<div>がすべて兄弟である場合、次のようなことを簡単に行うことができます。

<div>
  <div id="Pub-Chains">
  <div id="Councils">
  <div id="Property">
  ...
</div>


$(function(){
  $("select#dropdown").change(function(){
    $('#' + $(this).val()).show().siblings().hide();
  }).change();
});

こちらをご覧ください。

より複雑なレイアウトがある場合は、クラス名を使用して<div>要素をグループ化することを考えることができます。

于 2013-01-16T12:08:53.783 に答える
1

これを試して：

$(document).ready(function () {

    function showTab( name ){
       name = '#' + name;
       $(name).siblings().hide(); //<-- hide this way
       $(name).show();
    }

これが機能しない場合は、これを行うことができますdoc ready handler

    function showTab( name ){
       name = '#' + name;
       $(name).siblings().hide(); //<-- hide this way
       $(name).show();
    }
   $(document).ready(function () {
   // then all your change stuff here
于 2013-01-16T12:05:33.833 に答える
1

このすべての div の親 div を作成し、それをセレクターで呼び出します。

これを試して

<div id="tabdivs">
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
</div>

jquery *更新済み*

$('#tabdivs').children().not(name).hide();

ここでフィドル..

于 2013-01-16T12:06:20.970 に答える
1

show hide に参加させたい div をグループ化して、ページ上の他の div から分離する必要があります。それらに共通のクラスを割り当て、そのクラスを使用してそれらを非表示にすることができます。

Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"

$('div.opt').hide();
于 2013-01-16T12:07:08.950 に答える