0

次のスクリプトを使用して、ドロップダウンの選択に基づいて div を表示しようとしています。何も入っていない単純なページで完全に機能します。しかし、開発中のページに配置すると、ページ全体が台無しになり、黒くなり、URL の最後に ...../myPage.html#someIdInThePage が表示されます。

JS:

<script type="text/javascript">
    $(document).ready(function () {
        function showTheTab(name) {
            name = '#' + name;
            $('div').not(name).hide();
            $(name).show();
        }

        $('#dropdown').change(function () {
            showTheTab($(this).val());
        });

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

    });
</script>

HTML: 

<form>
    <p>
        <select id="dropdown" name="dropdown">
            <option value="Pubs" 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 id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>
4

1 に答える 1

0

この行:$('div').not(name).hide();選択した div を除いて、ページ上のすべての div を非表示にします。非表示を行うには、より具体的なセレクターが必要になります

例

Javascript:

$(document).ready(function () {

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

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

        $(name).show();
    }

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

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

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

});

HTML:

<form>
      <p>
      <select id="dropdown" name="dropdown">
          <option value="Pubs" 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 class="Tabs">
    <div id="Pubs">pubs</div>
    <div id="Councils">councils</div>
    <div id="Property">property</div>
    <div id="Various">various</div>
    <div id="Universitys">universitys</div>
</div>
于 2013-09-02T09:17:45.857 に答える