Показать divs на основе выпадающего списка - скрипт не работает

Question

Я пытаюсь показать 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> 

Answer 1

Эта линия: $('div').not(name).hide(); будет скрывать все 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>