0

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">
       <a href="#tab1">COLLAR</a>
    </li>
    <li class="cuff_tab">
       <a href="#tab2">CUFF</a>
    </li>
    <li class="pocket_tab"> 
       <a href="#tab3">POCKET</a>
    </li>
    <li class="monogram_tab"> 
       <a href="#tab4">MONOGRAM</a> 
    </li>
    <li class="size_tab">
       <a href="#tab5">SIZE</a>
    </li>
 </ul>
</div>

if anyone knows it, please help me out. Thanks

Makudex
  • 1,042
  • 4
  • 15
  • 40
kingp
  • 83
  • 4
  • 15
  • could you please show us your dom for the progress bar? – Makudex Sep 14 '15 at 05:22
  • Here is the html:
    – kingp Sep 14 '15 at 07:00
  • Edited your question and put the html from your comment to the above question. – Makudex Sep 14 '15 at 07:09
  • I create a fiddle: http://jsfiddle.net/3ynndggL/ Could you please describe, what you mean with:"... if i was in second process bar then it can go only on previous bar ...". Sorry, but I don't get it. – Bjoerg Sep 14 '15 at 07:11
  • means if currently i am in cuff tab then i can go on collar tab but can't go on pocket or monogram tab when click on it it won't be active.only previous tab will be clickable and their content will appear not the next tab because in content , there is a next button which will go for next tab when clicked – kingp Sep 14 '15 at 07:34
  • I think it is already answered in another question here: http://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap – cs.matyi Sep 14 '15 at 08:33
  • what will be the condition i use? can you please update in jsfiddle – kingp Sep 14 '15 at 08:51
  • please see this: http://stackoverflow.com/questions/32332744/show-and-hide-active-class-in-li-when-clicked-on-input-button and see the code snippet and tell me the solution – kingp Sep 14 '15 at 11:56

0 Answers0