We Keep Coding

How to make only previous process bar clickable using jquery

I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks

Jquery getting the tab to add a class when active

All of this works except for trying to get it to apply the class 'current_tab' to the 'ul.tab_nav li' when the 'ul.tab_nav li a' is clicked.
JQuery
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link
tab.find('.tab_content').slideUp(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
and html
<div class="box tabs siteBackgroundColor">
<div class="box_header">
<ul class="tab_nav">
<li class="dummyTab"> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="box_content tab_content tab1 dummyTab"></div>
<div class="box_content tab_content tab2">
<p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
</div>
<div class="box_content tab_content tab3">3<br />
3<br />
3<br />
3</div>
<div class="box_content tab_content tab4">4<br />
4<br />
4<br />
4<br />
4</div>
</div>
Besides that it's working the way I need it to.

Try this,
tab.find('ul.tab_nav li').removeClass('current_tab');
$(this).closest('li').addClass('current_tab'); //Set clicked link li to active
Demo 1
To Set the active link only then try,
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
Demo 2
In Place of
tab.addClass('current_tab'); //Set clicked link class to active
Updated you should use hide() in place of slideup() which will not animate the closing div and check the active tab if it is your current_tab then use return false for that anchor click
Demo 3

Try replacing the following code
tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
with
tab.find('ul.tab_nav li').removeClass('current_tab'); // Remove active class from all links
$(this).parent().addClass('current_tab'); //Set clicked link class to active
Fiddle
http://jsfiddle.net/HMS37/

I edit in your code for you can learn easily:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('.tab_nav li a').click(function(){ //When any link is clicked
tab.find('.tab_nav li').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link
tab.find('.tab_content').slideUp(); // Hide all divs
$(".currentTab").slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});

onclick open sub menu, on click close sub menu?

On this page http://kimcolemanprojects.com/ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/
This is my html for the menu so far:
<div class="left" id="nav">
<ul id="menu">
<li id="light">
Lighting + Video
<ul style="display: none;">
<li>Django Django</li>
<li>Suntrap</li>
</ul>
</li>
<li id="photo">
Photograms
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->
As you can see I only need it to work within one list item. I need help writing the Javascript for this.
So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.

Quite Simple..
<script src="jquery.js"></script>
<div id="navigation">
<p>Menu</p>
<ul id="menu">
<li>Menu 1<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 2<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 3<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 4<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
This will be your HTML container etc, under this you will need your javascript to control that hiding and changing!! You can add some styling also if you feel artistic!
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
This is a simple HTML Example and you can execute it how you like.

I want to make my menu selected everytime it is clicked and changes the pages with selected menu

I have this jquery script:
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
//On Click Event
$(".navigation li").click(function() {
$(".navigation li").removeClass("selectedli"); //Remove any "active" class
$(this).addClass("selectedli"); //Add "active" class to selected tab
});
});
</script>
and css is as follows
.selectedli a {background: #3a73ba; color:#fff; cursor:default;}
and menu is written as
<div class="navigation">
<ul>
<!--<li>About Us
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> Member Profile Message from MD History </div>
</li>-->
<li class="selectedli">Home</li>
<li>2nd Page</li>
<li>Third Page</li>
</ul>
</div>
but when I click the link and navigate to "inner_index.php" the first li is selected whereas I want to select the second li. What should I do?

you can use
:second
or
:eq(1)
So
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
will become
$(".navigation second").addClass("selectedli").show(); //Activate first tab

jquery tabs selection

the jquery code is like this:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
and the tabs:
<ul class="tabs">
<li>Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>
whenever the page loads the 1st tab is opened 1st. but if i want the 2nd tab to show, then how can i do that. like from inside a function
im loading the page like: window.location="display.php";
when loaded i want the 2nd tab to open how to do that?? also from another function if i want the 1st tab to show how to do that?
thanks in advance..

do it like this,
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
var index = $("ul.tabs li.active").show().index();
$(".tab_content").eq(index).show();
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
then on the tabs (li) on the html, set an active like,
<ul class="tabs">
<li class="active">Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>