Jquery on click delays toggle class
Question
I'm trying to add class and change the button colors when clicking, all is working great but I've noticed that when i clicked the button there is a small delay - so when i click - first the tab changed it's content - and on the next click - it's toggling the class...and changing the color
Here is my Fiddle Or my Plunker - in case fiddle don't work (i experienced some issues)
Here is the CODE
$(document).ready(function(){ $('.tabs_div > li > a').on('click', function() { $.each($('.tabs_div > li'), function() { if ($(this).attr('class')) { $(this).find('a').find('span').toggleClass('active_bullet'); } }); }); $('.next_btn').click(function() { $('.tabs_div > .active').next('li').find('a').trigger('click'); }); });
.content-wrapper.parme_vous_page { background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px); } .sidebar-menu .sidebar-item-special.active { background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important; } .sidebar-menu li.active > a > .sidebar-item-label, .sidebar-menu li.active > a > span > .pull-right { color: rgb(255, 255, 255) !important; } .sidebar-menu .sidebar-item-special.active:before { right: 0; top: 25%; content: " "; position: absolute; pointer-events: none; margin-top: -30px; width: 21px; height: 30px; /* background: #f00; */ background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px); -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } .parme_vous_icon { width: 200px; height: 200px; background-color: #3f4760; } div.content-wrapper.parme_vous_page > div > div.page_container { width: 100%; margin-top: 25vh; } div.content-wrapper.parme_vous_page > div > div.page_container > div.row { margin-right: 51px !important; margin-left: 0px; } .links_col { min-width: 160px; min-height: 200px; border-radius: 15px; background-color: white; overflow: hidden; margin-bottom: 25px; -webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); -moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); } .logo_header { padding-top: 10%; text-align: center; min-height: 100px; } .logo_header img { width: 55px; } .logo_footer { padding: 15px; color: white; text-align: center; background-color: #3f4760; min-height: 100px; } .logo_footer p:nth-child(1) { font-family: 'Montserrat', sans-serif; font-size: 14px; } .logo_footer p:nth-child(2), .logo_footer p:nth-child(3) { font-family: 'Roboto', sans-serif; font-size: 11px; color: #aaadb5; } #myTab { list-style-type: none; } #myTab > li > a > span.tab_circle { /*border: 2px solid white;*/ background-color: #5d3c95; height: 10px; border-radius: 50%; width: 10px; } .active_bullet { border: 2px solid white; height: 15px; border-radius: 50%; width: 15px; } #myTab > li > a > span.tab_toggler { display: inline-block!important; float: none!important; margin-left: -20px; font-size: 20px; color: white; } .next_btn> i { display: inline-block; border-radius: 73px; border: 8px solid white; background-color: white; } .next_btn { position: fixed; bottom: 20px; margin-left: 40%; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;"> <!-- container --> <div class="page_container"> <div class="row"> <div class="links_buttons col-md-2"> <ul id="myTab" class="tabs_div"> <li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li> <li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li> <li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li> </ul> </div> <div class="links_cont col-md-10"> <div class="tab-content"> <!---------------------------------------------FIRST TAB--------------------------------------------------> <div class="tab-pane active" id="first"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> </div> <!---------------------------------------------SECOND TAB--------------------------------------------------> <div class="tab-pane" id="second"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> </div> <!---------------------------------------------THIRD TAB--------------------------------------------------> <div class="tab-pane" id="third"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="next_btn"> <i class="fa fa-arrow-down" aria-hidden="true"></i> </div> </div> </div> </div>
1 answers
solution1
1 ACCPTED 2017-07-20 14:09:27
Use This :
$(document).ready(function(){
$('.tabs_div > li[class] > a').click(function(){
$('span',this).toggleClass('active_bullet');
})
})
$(document).ready(function(){ $('.tabs_div > li[class] > a').click(function(){ $('span',this).toggleClass('active_bullet'); }) })
.content-wrapper.parme_vous_page { background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px); } .sidebar-menu .sidebar-item-special.active { background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important; } .sidebar-menu li.active > a > .sidebar-item-label, .sidebar-menu li.active > a > span > .pull-right { color: rgb(255, 255, 255) !important; } .sidebar-menu .sidebar-item-special.active:before { right: 0; top: 25%; content: " "; position: absolute; pointer-events: none; margin-top: -30px; width: 21px; height: 30px; /* background: #f00; */ background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px); -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } .parme_vous_icon { width: 200px; height: 200px; background-color: #3f4760; } div.content-wrapper.parme_vous_page > div > div.page_container { width: 100%; margin-top: 25vh; } div.content-wrapper.parme_vous_page > div > div.page_container > div.row { margin-right: 51px !important; margin-left: 0px; } .links_col { min-width: 160px; min-height: 200px; border-radius: 15px; background-color: white; overflow: hidden; margin-bottom: 25px; -webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); -moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47); } .logo_header { padding-top: 10%; text-align: center; min-height: 100px; } .logo_header img { width: 55px; } .logo_footer { padding: 15px; color: white; text-align: center; background-color: #3f4760; min-height: 100px; } .logo_footer p:nth-child(1) { font-family: 'Montserrat', sans-serif; font-size: 14px; } .logo_footer p:nth-child(2), .logo_footer p:nth-child(3) { font-family: 'Roboto', sans-serif; font-size: 11px; color: #aaadb5; } #myTab { list-style-type: none; } #myTab > li > a > span.tab_circle { /*border: 2px solid white;*/ background-color: #5d3c95; height: 10px; border-radius: 50%; width: 10px; } .active_bullet { border: 2px solid white; height: 15px; border-radius: 50%; width: 15px; } #myTab > li > a > span.tab_toggler { display: inline-block!important; float: none!important; margin-left: -20px; font-size: 20px; color: white; } .next_btn> i { display: inline-block; border-radius: 73px; border: 8px solid white; background-color: white; } .next_btn { position: fixed; bottom: 20px; margin-left: 40%; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;"> <!-- container --> <div class="page_container"> <div class="row"> <div class="links_buttons col-md-2"> <ul id="myTab" class="tabs_div"> <li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item1(Clickable)</a></li> <li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item2Item3[have'nt class]</a></li> <li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item3[have'nt class]</a></li> </ul> </div> <div class="links_cont col-md-10"> <div class="tab-content"> <div class="tab-pane active" id="first"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> </div> <div class="tab-pane" id="second"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="tab-pane" id="third"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Blog</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Facebook</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Mon compte</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="links_col"> <div class="parme-vous_links"> <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div> <div class="logo_footer"> <p>Fonctionnalité</p> <p>Lorem ipsum dolor</p> <p>sit amet consectuer</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="next_btn"> <i class="fa fa-arrow-down" aria-hidden="true"></i> </div> </div> </div> </div>
Update post :
If you want work on all buttons,remove [class] in selector like this:
$(document).ready(function(){
$('.tabs_div > li > a').click(function(){
$('span',this).toggleClass('active_bullet');
})
})
If you want when click on button, remove affect of other buttons,use this code:
$(document).ready(function(){
$('.tabs_div > li > a').click(function(){
$('.tabs_div > li > a span').removeClass('active_bullet');
$('span',this).toggleClass('active_bullet');
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery Click this or that and toggle class
toggle class on click jquery
JQuery Toggle Class 1 toggle per click
Jquery to Javascript: Toggle class on click
jQuery toggle class and change it on click
jQuery, on click, toggle field like it is toggling class
Jquery to toggle one div of same class on click
jQuery click and toggle not working with class or ID
Jquery toggle class on click, and remove class if another menu item clicked
Toggle div on Link[same link class on various] click Jquery
Related Tags