jquery addclass方法不能与href链接使用jquery

时间:2018-04-18 09:11:42

标签: jquery html

问题$("#mylink").attr("href",uri);如果我使用这个我无法使用addclass方法添加活动类,如果我只使用$("#mylink").addClass('active')它的工作正常,但如果我与$("#mylink").attr("href",uri).addClass('active');一起使用活跃的课程没有。我的uri是sysadmin_delivery_ready.html?uid="+testnum'请帮我解决这个问题。



$(document).ready(function() {
  $("#mylink").click(function() {
    var getuid = $ {
      userId
    };
    var testnum = btoa(getuid);
    var uri = "sysadmin_delivery_ready.html?uid=" + testnum;
    $("#mylink").attr("href", uri);
    var clsval = this.className;
    if (clsval == '') {
      alert("blank");
      $("#mylink").addClass('active');
    } else {
      alert("ac");
      $("#mylink").removeClass('active');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li>
    <a href="#">
      <i class="fa fa-dashboard fa-fw"></i> Data
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-edit fa-fw"></i> General Information
    </a>
  </li>
  <li>
    <a href="#" id="mylink">
      <i class="fa fa-sign-out fa-fw"></i> Deliver
    </a>
  </li>
</ul>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

请在此处找到一个工作片段:

由于我没有真正改变你的代码的功能,你能评论告诉我它有什么问题吗?
我没理得。

$(document).ready(function() {
  $("#mylink").click(function() {
    // I commented some of the code to have a working snippet…
    /*var getuid = $ {
      userId
    };
    var testnum = btoa(getuid);
    var uri = "sysadmin_delivery_ready.html?uid=" + testnum;*/
    
    var uri = "#foo"; // Added for test
    $("#mylink").attr("href", uri);
    var clsval = this.className;
    if (clsval == '') {
      // … and changed alert into console.log
      console.log("blank");
      $("#mylink").addClass('active');
    } else {
      console.log("ac");
      $("#mylink").removeClass('active');
    }
    
  });
});
.active{
  color: red;
}
li{
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="nav" id="side-menu">
  <li>
    <a href="#">
      <i class="fa fa-dashboard fa-fw"></i> Data
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-edit fa-fw"></i> General Information
    </a>
  </li>
  <li>
    <a href="#" id="mylink">
      <i class="fa fa-sign-out fa-fw"></i> Deliver
    </a>
  </li>
</ul>

请注意,我添加了FontAwesome 4和样式化li以及active类以获得更好的输出。

答案 1 :(得分:0)

  

您的链接不正确,您应该使用

$("#mylink").addClass('active').attr("href",uri); 

而不是

$("#mylink").attr("href",uri).addClass('active');

但我建议您使用以下代码并根据您的要求进行更改。

$(document).ready(function() {
  $("#mylink").click(function() {
    var getuid = $ {  userId  };
    var testnum = btoa(getuid);
    var uri = "sysadmin_delivery_ready.html?uid=" + testnum;
    $(this).toggleClass('active').attr("href",uri);   
  });
});