h1タグはjquery .html（）によって変更されません。

Question

jqueryのかなり初心者です。私はnavbarと私が選択したものに基づいて自分のタグを変更しようとしている。

$(document).ready(function() { 
 
\t $('a').click(function(){ 
 
\t the = $(this).html(); 
 
\t linkvalue = $(this).attr('data-link'); 
 
\t $('#whatItIs').html(the); 
 
\t console.log(the); 
 
\t console.log(linkvalue); 
 
\t 
 

 
\t switch(the) { 
 
\t  case "Steel Products": 
 
\t  \t { \t 
 
\t \t  \t window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Steel Doors": 
 
\t   { \t 
 
\t   \t 
 
\t   \t window.location.href = linkvalue;  
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Digital Safes": 
 
\t  \t { 
 
\t \t   
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Security Equipment": 
 
\t  \t { 
 
\t \t \t \t 
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } \t 
 
\t  case "Storage Solutions": 
 
\t  \t { 
 
\t  \t \t 
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Steel Furniture": 
 
\t  \t { 
 
\t \t   
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break;  
 
\t   }   
 
\t  default: 
 
\t  { 
 
\t   console.log("Not Found"); 
 
\t   //window.location.href = "404.html"; 
 
\t  } 
 
\t } 
 
\t }); 
 
});

<li class="dropdown" class="active"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
 
         <ul class="dropdown-menu"> 
 
          <li> 
 
           <a data-link="securityEquipment.html">Steel Products</a> 
 
          </li> 
 
          <li> 
 
           <a data-link="securityEquipment.html">Steel Doors</a> 
 
          </li> 
 
          <li > 
 
           <a data-link="securityEquipment.html">Digital Safes</a> 
 
          </li > 
 
          <li> 
 
           <a data-link="securityEquipment.html">Security Equipment</a> 
 
          </li> 
 
          <li > 
 
           <a data-link="securityEquipment.html">Storage Solutions</a> 
 
          </li> 
 
          <li> 
 
           <a data-link ="securityEquipment.html">Steel Furniture</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 

 
<h1 class="page-header" id="whatItIs"> 
 
       Untitled 
 
<!--      <small>Subheading</small> 
 
-->    </h1>

問題は、その後のH1だけ第二の変更とバック私はそれが設定されている元に変化することです。 これはかなりシンプルなようです。私は間違って何をしているのか分かりません

Answer 1

h1の内容をリスト内のクリックされたリンクの内容に変更したい場合は、リンクのtext()をクリックするだけで変数に保存することができます。それにh1を更新：

$('.dropdown-menu a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var title = $(this).text(); 
 
    $('#whatItIs').text(title); 
 
});

.dropdown-menu a { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="dropdown" class="active"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a data-link="securityEquipment.html">Steel Products</a></li> 
 
    <li><a data-link="securityEquipment.html">Steel Doors</a></li> 
 
    <li><a data-link="securityEquipment.html">Digital Safes</a></li> 
 
    <li><a data-link="securityEquipment.html">Security Equipment</a></li> 
 
    <li><a data-link="securityEquipment.html">Storage Solutions</a></li> 
 
    <li><a data-link="securityEquipment.html">Steel Furniture</a></li> 
 
    </ul> 
 
</li> 
 
<h1 class="page-header" id="whatItIs">Untitled</h1>

jsFiddle：あなたは、各リンクの股関節に新しいページをロードしているのでhttps://jsfiddle.net/azizn/ajqLu9vy/