We Keep Coding

Bootstrap navbar can't add active with JavaScript

I used Bootstrap , now I want to add active for the new navbar title when I jump to the new page, but the active cann't dynamic display , unless I manually refresh the new page.
The Html codes:
<ul class="nav navbar-nav " data-in="fadeInDown" data-out="fadeOutUp">
<li class="NavHead active"> Home</li>
<li class="NavHead"> Questions</li>
<li class="NavHead"> <a href="/tags" >Tags</a></li>
<li class="NavHead"> <a href="/knowledges" >Knowledges</a></li>
<li class="NavHead"> Company</li>
<li class="NavHead"> Activity</li>
</ul>
The JavaScript codes:
$(document).ready(function () {
'use strict';
$(function () {
$(".navbar-nav").find(".NavHead").each(function () {
if ($("a",this).attr("href") === window.location.pathname) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});
});
How should I to revise the JS?

You can use this code for add active class for the new navbar title when I jump to the new page
$('ul li a').click(function(){
$('li a').parent().removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Praveen is right, you have two document.ready function. Here's how I did it (just tweaking some part of your code):
$(function () {
$(".navbar-nav").find(".NavHead").each(function () {
if ($(this).children('a').attr("href") === window.location.pathname) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
})
})

I had soluve my questions just need to paste the js codes in my footer.html , and it works as my except . Maybe there are best way to solve this problem ...
the js codes like this :
<script>
$(function () {
$(".navbar-nav .NavHead").each(function () {
if ($("a",this).attr("href") === location.pathname) {
$(this).addClass("active");
return true;
} else {
$(this).removeClass("active");
}
});
});
</script>

Links not working while applying slideToggle

while applying slideToggle function the links are not working. below is the link for my demo site.
http://codezigns.com/teyseer_laboratory/htm/toggle.html
my script is
$(".nav li > a").click(function(e) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
});
and also include
$(".trigger").click(function(e) {
e.preventDefault();
$(".main-nav > ul").slideToggle(300);
});
Link is applied in parent item "Tutorial" and child item "Photoshop".

Remove return false; from your a click event. It is preventing redirection.

This is happening because you are returning false on a click event, you should exclude the links from returning false, you should add a class to the real links and exclude them of your function:
HTML
<nav class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li><a class="reallink" href="https://www.google.co.in/">Photoshop</a></li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
</nav>
JS:
$(".nav li > a:not(.reallink)").click(function(e) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
});
Hope it helps

The problem is you are returning false for each a click. Try like following. Hope this will help you.
$(".nav li > a").click(function (e) {
if(this.href.indexOf('#') > -1) {
$(this).parent().siblings().find('ul').slideUp(500);
$(this).next('ul').stop().slideToggle(300);
return false;
}
});

jQuery li element select by ID

can anyone please help?
I have a HTML code like this.
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>
I try to add a .click event on li having id hide_filter.
What I have done is-
$("#hide_filter").click(function()
{
alert('message');
});
And -
$(".navbar-left li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
And -
$('ul.selectedItems li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
And -
$('#hide_filter')[0].click(function()
{
//$("p").hide();
alert('message');
});
But nothing works for me.
Thanks in advance for helping..

Actually It works :)
$("#hide_filter").click(function()
{
alert('message');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>

Assuming you have added the jquery library, You need to attach the event when DOM is loaded.i.e. on DOM ready event:
$(function(){//document ready function
$("#hide_filter").click(function(){
alert('message');
});
});
Working Demo

Maybe your code is not eval.
Try put your code in body tag with function wrap like this
$(function(){ //document ready function
$("#hide_filter").on("click",function(){
console.log('message');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Remove .selectedItems selector from your 3rd option
$('ul li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Remove index 0 from your 4th option
$('#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Otherwise your 4 options are correct and will work fine. Kindly make sure you have written these codes inside ready event.
$(document).ready(function(){
$("#hide_filter").click(function()
{
alert('message');
});
});

Maybe there is a problem with jquery libraries. Are they in conflict with other javascripts?

js 'toggle' or 'hover' function?

I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)

If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.

Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});

use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>

tabbed navigation with jquery

i need help creating and actice state on tabs here is my javascriptand part of my html i cant seem to enter css on here please request it if you require it
i need it so which ever tab you are on it shows the same color as the active container background with no borders on the join i need this for the top and side tabs any help on how to do this would be much appreciated as ive looked for days for a solution and only ones i can find are plugins which i dont want to use
also i tried to post an image but im not allowed
java script
$(document).ready(function () {
$("a").click(function () {
$(".side").show(".fastest");
});
$(".overveiw").click(function () {
$(".hide").hide();
$(".div1").show();
$(".overveiw").addClass("active");
});
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
});
$(".websites").click(function () {
$(".hide").hide();
$(".div3").show();
});
$(".faq").click(function () {
$(".hide").hide();
$(".div4").show();
});
$(".support").click(function () {
$(".hide").hide();
$(".div5").show();
});
});
top navigation tabs
<ul>
<li class="dealer"><a class="dealer">Manufacturer Dealer</a></li>
<li class="lender"><a>Lender<br />&nbsp</a></li>
<li class="developer"><a>Developer<br />&nbsp</a></li>
</ul>
side navigation
<ul class="side">
<li class="overveiw data-panel"><a>Overveiw</a></li>
<li class="tour data-panel"><a>Take the tour</a></li>
<li class="websites data-panel"><a>Example websites</a></li>
<li class="faq data-panel"><a>FAQ</a></li>
<li class="support data-panel"><a>Support</a></li>
</ul>
and 5 containing divs wrapped in a main container

fixed now managed to create the effect i was after. after much trial and error here is the code i used for each tab maybe there is a simpler way to do it but this works for now
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
$(".tab").addClass("inactive");
$(".tour").removeClass("inactive");
$(".tour").addClass("active");
});