I have a HTML web design here I try to set tabs active inactive jquery. It work but not properly. How can I do for proper work of tabs active inactive use jQuery. I am following this code.
My HTML code:
<div class="nav" id="nav-tab" role="tablist"> <div class="col-sm-3"> <button type="button" class="form-control my-acount-btn"><a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true" style="color:#FBFCFC;">Profile</a></button> </div> <div class="col-sm-3"> <button type="button" class="form-control my-acount-btn"><a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false" style=";color:#020200;">Order History</a></button> </div> <div class="col-sm-3"> <button type="button" class="form-control my-acount-btn"><a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false" style=";color:#020200;">Edit Profile</a></button> </div> </div>
jQuery code:
<script type="text/javascript"> $('#nav-tab a').click(function (e) { $("#nav-tab .form-control").removeClass("my-acount-btn-active"); $("#nav-tab .form-control").addClass("my-acount-btn"); }); </script>
Apply these example code hope it will woke properly on your web page.
<script type="text/javascript"> $('#nav-tab a').click(function (e) { e.preventDefault(); $("#nav-tab .form-control").removeClass("my-acount-btn-active"); $("#nav-tab .form-control").addClass("my-acount-btn"); $(this).parent().removeClass("my-acount-btn"); $(this).parent().addClass("my-acount-btn-active"); }); </script>
Question and answer is powered by AnsPress.io