CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bajjuri Karthik
Bajjuri Karthik

Reputation: 31

jquery .click() is working only when clicked twice

I have an anchor tag with class left-sidebar-nav-link, which on clicking should check if the href matches with the url and , if matched should be bolded, but its working only on clicking twice,but not once.

<a class="left-sidebar-nav-link" href="#anchor"> SubMenu1</a> 

$(document).ready(function() {
    $(".left-sidebar-nav-link").on("click", function() {
        var href1 = $(this).attr("href");
        if (window.location.href.indexOf(href1) >= 0) {
            $(this).css('font-weight', 'bold');
        }
    });
});

Upvotes: 3

Views: 715

Answers (5)

Bajjuri Karthik
Bajjuri Karthik

Reputation: 31

finally!!, this worked for me,I tried to trigger the click event on hash change

$(window).on('hashchange', function(e){
 $(".left-sidebar-nav-link").on("click", function() {
    window.location.href = $(this).attr("href");
    var href1 = $(this).attr("href");
    if (window.location.href.indexOf(href1) >= 0) {
        $(this).css('font-weight', 'bold');
    }
 }); 
});

Upvotes: 0

Kostas Pelelis
Kostas Pelelis

Reputation: 1342

In terms of logic your code doesn't make sense. You are clicking an a tag which will change the URL to the href of this tag. So checking if the location is that href is like testing if the a tag works.

The double click happens because the events happen in this order:

  1. Your URL is http://someting.com/#a_random_anchor
  2. You click the a tag
  3. Click handlers fires. You check if URL contains the href of the a tag(it does't).
  4. A default click handler fires since you haven't used event.preventDefault()
  5. URL changes to http://someting.com/#anchor
  6. In the next click your click handler will be successful

EDIT:

A more solid solution would be to have an active class that you will add to the item that you click.

$('nav').delegate('.inactive', 'click', function(event) {
  var selectedTab = this.id.split('-')[1];
  document.location.hash = selectedTab;

  var $this = $(this);
  $this
    .removeClass('inactive')
    .addClass("active");
  $this.siblings()
    .addClass('inactive')
    .removeClass('active');
});
body {
  font: arial;
}
nav {
  margin: 50px;
  font-size: 2rem;
  text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
}
li {
  height: 25px;
  float: left;
  margin-right: 0px;
  padding: 0 20px;
}
li a {
  text-decoration: none;
  color: #878787;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
li a:hover {
  color: #666;
}
li.active a {
  font-weight: bold;
  color: #373737;
}
* {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="active" id="nav-tab1"><a>Tab1</a>
    </li>
    <li class="inactive" id="nav-tab2"><a>Tab2</a>
    </li>
    <li class="inactive" id="nav-tab3"><a>Tab3</a>
    </li>
    <li class="inactive" id="nav-tab4"><a>Tab4</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Roma
Roma

Reputation: 282

Try this

$(document).ready(function() {
$(".left-sidebar-nav-link").on("click", function() { 
	var href1 = $(this).attr("href");
	window.location.href = href1;	
	if (window.location.href.indexOf(href1) >= 0) {
		$(this).css('font-weight', 'bold');
	}
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="left-sidebar-nav-link" href="#anchor"> SubMenu1</a>

Upvotes: 0

brk
brk

Reputation: 50346

Since there is an href prevent the default behavior by using event.preventDefault

$(document).ready(function() {
  $(".left-sidebar-nav-link").on("click", function(event) {
    event.preventDefault();
    alert('1')
    var href1 = $(this).attr("href");
    if (window.location.href.indexOf(href1) >= 0) {
      $(this).css('font-weight', 'bold');
    }
  });
});

JSFIDDLE

Upvotes: 0

XianChen
XianChen

Reputation: 114

$(document).ready(function() {
    $(".left-sidebar-nav-link").on("click", function() {
        window.location.href = $(this).attr("href");
        var href1 = $(this).attr("href");
        if (window.location.href.indexOf(href1) >= 0) {
            $(this).css('font-weight', 'bold');
        }
    });
});

Upvotes: 4

Related Questions