CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hamoon
hamoon

Reputation: 35

href of "a" tag not working in ul li

I have a togglable sidebar which has some links inside of it and some j-query code which enables the active class for links,everything is working as i expected but the links are not working

Here is my HTML code:

<div id="wrapper" class="toggled-2">
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
      <li class="active">
        <a href="#" class="a-properties">
          <asp:Literal runat="server" Text="<%$ Resources:Dashboard,Home%>" />
          <span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x " style="float: left;"></i></span>
        </a>
        <ul class="nav-pills nav-stacked" style="list-style-type: none;">
          <li>
            <a href="https://www.google.com/" class="a-properties subMenu">
              <span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span>
              <asp:Literal runat="server" Text="<%$ Resources:Dashboard,kartabl%>" />
              <span class="fa-stack fa-lg pull-left"></span>
            </a>
          </li>
          <li>
            <a href="https://www.google.com/" class="a-properties subMenu">
              <span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span>
              <asp:Literal runat="server" Text="<%$ Resources:Dashboard,virayesh_mshakhasat%>" />
              <span class="fa-stack fa-lg pull-left"></span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
  </div>
</div>

and here is my j-query code:

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled-2");
  $('#menu ul').hide();
});
$("#menu a").click(function() {
  if (!$(this).parent().hasClass("active") && !$(this).hasClass("subMenu")) {
    $(".active").removeClass("active");
    $(this).parent().addClass("active");
  } else {
    return false; //this prevents flicker
  }
});
$(".subMenu").click(function() {
  if (!$(this).hasClass("sub-active")) {
    $(".sub-active").removeClass("sub-active");
    $(this).parent().addClass("sub-active");
  } else {
    return false; //this prevents flicker
  }
});

some said that java-script is making the trouble,but i don't know how to fix it! NOTE: the css properties of the "a" tag are set to:

display: block;
width: 100%;
height: 100%;

Upvotes: 2

Views: 1295

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

The main reason why you are using:

return false; //this prevents flicker

The above code is to stop the default event and prevent it from doing literally anything. Removing that works. To prevent going to top, please attach the event handler only to those <a> tags which have a href="#". Something like:

$('a[href="#"]').click(function () {
  // Your code here...
  return false;
});

Finally, I would advise really not to use return false, but instead use:

$('a[href="#"]').click(function (e) {
  // This is safer version of return false and also doesn't affect the links.
  e.preventDefault();
  // Your code here...
});

Upvotes: 3

Related Questions