jquery - How to display error message when the user clicks on other tabs instead of the active tabs -
i have 5 tabs out of first tab active tab.on page load when user clicks on other tab rather first tab error message should displayed user using noty plugin should 'first click on first tab' active tab.when user clicks on first tab second tab must enabled not third , fourth,similarly when user clicks on third tab fourth tab must enabled , on till last tab.
here code
<!doctype html> <html lang="en"> <head> <title>bootstrap case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="jquery.noty.packaged.js"></script> </head> <body> <div class="container"> <!-- nav tabs --> <ul id="mytabs" class="nav nav-tabs" role="tablist"> <li class="active"> <a href="#first" role="tab" data-toggle="tab"> <i class="fa fa-home"></i> first tab </a> </li> <li class="disabled disabledtab second" ><a href="#second" role="tab" data-toggle="tab"> <i class="fa fa-user"></i> second tab </a> </li> <li> <a href="#third" role="tab" data-toggle="tab"> <i class="fa fa-envelope"></i> third tab </a> </li> <li> <a href="#fourth" role="tab" data-toggle="tab"> <i class="fa fa-envelope"></i> fourth tab </a> </li> <li> <a href="#fourth" role="tab" data-toggle="tab"> <i class="fa fa-envelope"></i> fifth tab </a> </li> </ul> <!-- tab panes --> <div class="tab-content"> <div class="tab-pane fade active in " id="first"> <h2>first tab</h2> </div> <div class="tab-pane fade disabled" id="second"> <a href="javascript:show_create_case_msg();"> <h2>second tab</h2> </div> <div class="tab-pane fade" id="third"> <h2>third tab</h2> </div> <div class="tab-pane fade" id="fourth"> <h2>fourth tab</h2> </div> <div class="tab-pane fade" id="fifth"> <h2>fifth tab</h2> </div> </div> </div> </body> </html>
add class .disabled tabs in html, except first one. add following code:
$(".disabled").click(function(e){ e.preventdefault(); show_create_case_msg(); }); $(".tab-pane:not(.disabled)").click(function(){ $(this).next().removeclass("disabled"); }); 
Comments
Post a Comment