nav pills navigation html takes double clicks to change active tab class - javascript

<div class="container">
<br>
<ul class="nav nav-pills">
<li class=" active btn-primary "><a data-toggle="pill" href="#home">Ask</a></li>
<li class=" btn-primary "><a data-toggle="pill" href="#menu1">Reviews</a></li>
<li class=" btn-info " ><a data-toggle="pill" href="#menu3">WRITE A REVIEW</a></li>
<li class=" btn-info "><a data-toggle="pill" href="#menu2">ASK A QUESTION</a></li>
</ul>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
some content tab 1
</div>
<div id="menu1" class="tab-pane fade">
some content tab 2
</div>
<div id="menu2" class="tab-pane fade">
some content tab 3
</div>
<div id="menu3" class="tab-pane fade">
some content tab 4
</div>
</div>
</div>
It takes double clicks on a tab to change the active tab from one to another.... the tab content changes on one click but the active tab is shown as home tab and changes only on second click on same tab.
P.S. I am using angular

try to use data-target instead of href as when you use href your url also changes.. and the url of your current page changes..

Related

Bootstrap 4 navigation tabs content not showing content on initial page load

On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.

Why when tab2 is clicked it appears always the content of the tab1?

I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".
Do you know where is the issue?
Fiddle with issue: https://jsfiddle.net/cv25swga/8/
HTML:
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<!-- other tab links -->
<li class="disabled">
<a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">Access Data</span>
</a>
</li>
</ul>
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" id="tab1" href="#tab1"
data-toggle="tab"
role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link border" id="tab2" href="#tab2"
data-toggle="tab" role="tab">tab2</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
aria-labelledby="home-tab">
tab1
</div>
<div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
aria-labelledby="home-tab">
tab2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
This is caused by the fact both your tabs and the links have the same ID.
Change your IDs up so that they are unique on the page and the problem will disappear.

Quick way to navigate between Sub Tab pages using Javascript

Guys I'm right now Stack and upset because I can't get it working...I have an MVC application which works well. Only I have a View Page of Many Main Tabs with Sub Tabs (see picture). My question is that: Is it possible to toggle between sub tabs using JS? If yes, then how?
I have tried the following but it's only toggling the Main Tabs and not the Sub tabs once an action is send.
I tried the following JS:
function Edit(url) {
$.ajax({
type: 'GET',
url: url,
success: function (response) {
$("#userSubSecondTab").html(response);
$('ul.nav.nav-tabs a:eq(1)').html('Edit User Record');
$('ul.nav.nav-tabs a:eq(1)').tab('show');
}
});
}
And Main Page Views:
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">Main tab 1</a></li>
<li class="active"><a data-toggle="tab" href="#tab2">Main tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Main Tab 3 </a></li>
<li><a data-toggle="tab" href="#tab4">Main Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in">#Html.Action("ViewMain1")</div>
<div id="tab2" class="tab-pane in active">#Html.Action("ViewMain2")</div>
<div id="tab3" class="tab-pane fade in">#Html.Action("ViewMain3")</div>
<div id="tab4" class="tab-pane fade in">#Html.Action("ViewMain4")</div>
</div>
Now Sub Tab View
<div class="row">
<div class="col-lg-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-users"></i> List of Users</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#userSubFirstTab">View All Users</a></li>
<li><a data-toggle="tab" href="#userSubSecondTab">Add New </a></li>
</ul>
<div class="tab-content">
<div id="userSubFirstTab" class="tab-pane fade in active">#Html.Action("ViewUsers")</div>
<div id="userSubSecondTab" class="tab-pane fade in">#Html.Action("AddOrEditUser")</div>
</div>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
</div>
</div>
</div>
</div>
Really I don't know What I am doing wrong? My problem is that when the JS toggle the view, it's changes from the Main Tab View rather than the Sub Tab View (Add User & View User)
How can the JS redirect or toggle the Sub View when ever a Edit button is Click?
I want the view to switch between Add New to View User tab and not from The Main Tab View.
I think It's might be something about the JS but I don't know how to do that.
Please Everyone is welcome with an answer!

Bootstrap 3, Dropdown in Nav Bar not targeting href on click on Internet Explorer

I am having a weird issue with a bootstrap dropdown with a Nav-Bar. Items on the Nav-Bar Target Tabs on the page. I have multiple Nav bar items and then one dropdown Nav item with 3 items within it. On Chrome and Firefox it works perfectly, however on IE, on the dropdown Nav Items it does not target the tab and display the tab.
Any idea what could be causing this?
Here is my code:
<ul id="tabshome" class="nav nav-pills nav-justified">
<li id="tab1" class="active taboutline"><a data-toggle="pill" href="#tabDiv1">Tab1</a></li>
<li id="tab2" class="taboutline"><a data-toggle="pill" href="#tabDiv2">Tab2</a></li>
<li class="dropdown taboutline">
<a class="dropdown-toggle" data-toggle="dropdown">
Drop Down Tab
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="dropdowntab1">DropDown Tab 4</li>
<li id="dropdowntab2">DropDown Tab 5</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="tabDiv1" class="tab-pane fade blocks in active ">
<div class="row">
Tab 1
</div>
</div>
<div id="tabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 2
</div>
</div>
<div id="dropdownTabDiv1" class="tab-pane fade blocks">
<div class="row">
Tab 3
</div>
</div>
<div id="dropdownTabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 4
</div>
</div>
</div>
I am using Jquery, and I have made sure that the jquery reference is above the bootstap.min.js reference.
I think it is because of missing ending quote of li id dropdowntab2.

Bootstrap Tabbed Nav with Collapsing Categories

I have been trying to get a tabbed nav system working that allows the user to collapse tabs into category headings. Ideally the categories would automatically close if you select a tab outside of them, and would both look like a selected tab and actually select the first tab in their group when selected.
As of now, I have the nav functioning with the ability to show and hide certain tabs and all of the tabs work, but it is treating the tabs inside of the collapsible group as a different set from those outside it and, as such, does not deselect tabs properly. I was trying to remedy this using javascript, but I haven't figured out a way. Any insights into this would be greatly appreciated.
Link to the code on jsFiddle.
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a>
</li>
<div id="Tab1" class="collapse in">
<ul class="nav nav-tabs nav-stacked" id="subnav">
<li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
<li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li>
<li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li>
</ul>
</div>
<li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
<div class="tab-pane fade" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
</div>
</div>
I managed to get this working but it required some slight changes in the markup plus some custom jQuery code.
Here's the updated fiddle. Note that the CSS was also updated to accommodate for the markup changes.
Here's the resulting code:
HTML
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
<li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
<div class="tab-pane fade" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
</div>
</div>
</div>
jQuery
$('.nav-tabs [data-toggle="collapse"]').on('click', function () {
//Prevent the subnav from collapsing
if ($($(this).attr('href')).hasClass('in')) return false;
//Make collapse links act like tabs
$(this).parent().addClass('active').siblings('li').removeClass('active');
//Activate first subtab
$($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');
});
$('.nav-tabs > li > a').on('click', function () {
//Hide any open subnav only if it's not the collapse link
//also deactivate any active subtab
if ($(this).data('toggle') != 'collapse') {
$(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');
}
});

Categories