h1標記不會通過jquery .html（）

Question

我很新手jquery。我有一個導航欄，並試圖根據我選擇的內容來更改標籤。

$(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/