Тег h1 не изменяется с помощью jquery .html ()

javascript jquery html css

62 просмотра

1 ответ

Я довольно новичок в 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 меняется только на секунду, а затем возвращается к исходному, на который я его установил. Это кажется довольно простым. я не знаю что я делаю не так

Автор: spetiwala Источник Размещён: 08.11.2019 11:16

Ответы (1)


0 плюса

Решение

Если вы хотите изменить содержимое так, 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/

Автор: Aziz Размещён: 21.08.2016 01:55
Вопросы из категории :
32x32