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