Develop Reference

toggle active on nav-tabs

$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>

You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO

What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.

try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});

This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.

I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/

Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>

add class to parent li when submenu is active

i am having a problem here despite googling for hours.
i have a menu which has submenus.
<div class="themenu">
<ul>
<li>Link 1 //Want to add class catactive here when the following submenu is active
<div class="thesubmenu">
<ul>
<li class="subcat-active">submenu1</li>
</ul>
</div>
</li>
</ul>
</div>
I tried using this query but its not happening.
$(document).ready(function(){
if($('.thesubmenu ul li').hasClass('subcat-active')){
$(this).parent('.themenu ul li').addClass('cat-active');
}
});

There are many ways to write this but there is no need to iterate (.each()) or use .hasClass() which slow down this simple call.
Simply select the li items with .subcat-active, then use closest('li') to find the closest li ancestor and add the class. You need to use .parent() first because closest() includes the starting element which is also a li.
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').parent().closest('li').addClass('cat-active');
});
http://jsfiddle.net/3ehvqzjh/1/

just do:
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').each(function(){
$(this).parent().closest('li').addClass('cat-active');
});
});
Demo: http://jsfiddle.net/bpkpn6b5/

Here is a DEMO
$(document).ready(function(){
if ($('.thesubmenu ul li').hasClass('subcat-active')) {
$('.thesubmenu ul li').parents('li:eq(0)').addClass('cat-active');
}
});

$(document).ready(function(){
$('.subcat-active').each(function () {
$(this).parents('li').eq(0).addClass('cat-active');
});
});
Working example

A button toggle some <li> from a <ul>

I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..

Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle

$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.

Change class name of anchor tab inside list

I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}

If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo

If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/

How to find a parent's child with jQuery?

I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?

It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);

The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/

Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.