Question

我的问题是，当我点击另一个lang时，它不会将下拉菜单更改为特定的lang，我的代码工作正常，它一直在改变，直到我添加href为止

$(document).ready(function(){
        var itaImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Italien.gif";
    	var engImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Grossbritanien.gif";
		var deuImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Deutschland.gif";
		var fraImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Frankreich.gif";

		var imgBtnSel = $('#imgBtnSel');
		var imgBtnIta = $('#imgBtnIta');
		var imgBtnEng = $('#imgBtnEng');
		var imgBtnDeu = $('#imgBtnDeu');
		var imgBtnFra = $('#imgBtnFra');

		var imgNavSel = $('#imgNavSel');
		var imgNavIta = $('#imgNavIta');
		var imgNavEng = $('#imgNavEng');
		var imgNavDeu = $('#imgNavDeu');
		var imgNavFra = $('#imgNavFra');

		var spanNavSel = $('#lanNavSel');
		var spanBtnSel = $('#lanBtnSel');

		imgBtnSel.attr("src",itaImgLink);
		imgBtnIta.attr("src",itaImgLink);
		imgBtnEng.attr("src",engImgLink);
		imgBtnDeu.attr("src",deuImgLink);
		imgBtnFra.attr("src",fraImgLink);

		imgNavSel.attr("src",itaImgLink);
		imgNavIta.attr("src",itaImgLink);
		imgNavEng.attr("src",engImgLink);
		imgNavDeu.attr("src",deuImgLink);
		imgNavFra.attr("src",fraImgLink);
    
    
      var engLink    = "{{url('language/en')}}";
      var deuLink    = "{{url('language/de')}}";
      var fraLink    = "{{url('language/fr')}}";
      var itaLink    = "{{url('language/it')}}";
  


     
      var linkNavIta = $('#navIta');
      var linkNavEng = $('#navEng');
      var linkNavDeu = $('#navDeu');
      var linkNavFra = $('#navFra');
   

      var linkNavSel = $('#linkNavSel');

		
    $( ".language" ).on( "click", function( event ) {
      var currentId = $(this).attr('id');

      if(currentId == "navIta") {
        imgNavSel.attr("src",itaImgLink);
        spanNavSel.text("IT");

        linkNavSel.attr("href",itaLink);
      } else if (currentId == "navEng") {
        imgNavSel.attr("src",engImgLink);
        spanNavSel.text("EN");
         linkNavSel.attr("href",engLink);
      }
         else if (currentId == "navDeu") {
        imgNavSel.attr("src",deuImgLink);
        spanNavSel.text("DE");
         linkNavSel.attr("href",deuLink);
      } else if (currentId == "navFra") {
        imgNavSel.attr("src",fraImgLink);
        spanNavSel.text("FR");
         linkNavSel.attr("href",fraLink);
      } 



      
    });
});

.icon-small
{
    height:18px;
    margin:0;
	padding:0;
}

.icon-medium
{
    height:22px;
	margin:0;
	padding:0;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!------ Include the above in your HEAD tag ---------->

<body>


            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img id="imgNavSel" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavSel">ITA</span> <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
            	        <li><a id="navIta" href="#" class="language"> <img id="imgNavIta" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavIta">Italiano</span></a></li>
                        <li><a id="navDeu" href="#" class="language"> <img id="imgNavDeu" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavDeu">Deutsch</span></a></li>
        			    <li><a id="navFra" href="#" class="language"><img id="imgNavFra" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavFra">Francais</span></a></li>
        			    <li><a id="navEng" href="#" class="language"><img id="imgNavEng" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavEng">English</span></a></li>
        	        </ul>
                </li>
            </ul>
     
    
</body>

这里它可以正常工作，因为我使用的链接来自本地主机并且知道它无法显示，但是当我尝试链接出现在每种语言上并且我可以单击我想要的语言时，它会发生变化但是，一旦我点击它刷新页面，它再次保留第一个意大利语，它不会改变我选择的另一个，我在这里使用Laravel，我想我与href链接有关可以某人帮我。

Answer 1

在点击事件中，使用preventDefault覆盖您设置为href属性的值：

 $( ".language" ).on( "click", function( event ) {
        event.preventDefault();
        .
        . // rest of your code
  }

Answer 2

您所要做的就是使用JavaScript取消click事件以防止发生默认操作。因此，当有人点击启用了JavaScript的链接时，点击事件会在您返回false时被取消，并阻止浏览器刷新。

您必须在jQuery代码段中添加此代码：

$('a').click(function() {

    //you can write something else here if you want

    return false; // cancel the event
});

下拉用href刷新页面

2 个答案: