h1標簽不會通過jquery .html（）更改

Question

我是jQuery的新手。 我有一個導航欄，我正在嘗試根據所選內容更改標簽。

 $(document).ready(function () { $('a').click(function (){ the = $(this).html(); linkvalue = $(this).attr('data-link'); $('#whatItIs').html(the); console.log(the); console.log(linkvalue); switch(the) { case "Steel Products": { window.location.href = linkvalue; break; } case "Steel Doors": { window.location.href = linkvalue; break; } case "Digital Safes": { window.location.href = linkvalue; break; } case "Security Equipment": { window.location.href = linkvalue; break; } case "Storage Solutions": { window.location.href = linkvalue; break; } case "Steel Furniture": { window.location.href = linkvalue; break; } default: { console.log("Not Found"); //window.location.href = "404.html"; } } }); }); 

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