My tabs are changing every time that a switch tabs, for example, some are wider examples:
When I click Policies
Code is the same so why does this happen?
<div class="tabs tabs-vertical tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tabsNavigationSimplebg5"><span>Videos
& Docs</span></a></li>
<li><a data-toggle="tab" href="#tabsNavigationSimplebg6">Policies</a></li>
<li><a data-toggle="tab" href="#tabsNavigationSimplebg7">District Shared Resources</a></li>
<li><a data-toggle="tab" href="#tabsNavigationSimplebg8">Left Tab 4</a></li>
</ul>
Nonworking Tab
<div class="tab-content">
<div class="tab-pane active" id="tabsNavigationSimplebg5">
<div class="left">
<h4>Videos & Documentation</h4>
Working tab
<div class="tab-pane" id="tabsNavigationSimplebg6">
<div class="left">
<h4>Policies</h4>
Related
I am trying to add deep linking for bootstrap tabs. It does add the tab id to the URL on each tab click but when I access the direct link (www.site.com/tabpage/#tab2) for the particular tab in a new browser window, it doesn't take me to the second tab. how can I make it work?
I need to get the direct URL to the particular tabs.
Here is the code used
HTML
<div class="tab_container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item mr-4 no-gutter">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content cisco-extralight p-4 pt-5 no-gutter">
<div role="tabpanel" class="tab-pane fade in active" id="tab1">
Tab 1 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab2">
Tab 2 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab3">
Tab 3 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab4">
Tab 4 contenrt
</div>
</div>
</div>
JS
//tab deep linking
var url = window.location.href;
if (url.indexOf("#") > 0){
var activeTab = url.substring(url.indexOf("#") + 1);
$('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
}
$('a[role="tab"]').on("click", function() {
var newUrl;
const hash = $(this).attr("href");
newUrl = url.split("#")[0] + hash;
history.replaceState(null, null, newUrl);
});
I have a dropdown menu inside bootstrap nav tabs. But a particular dropdown item only hovers for a limited width.
the code snippet :
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<ul class="dropdown-menu">
<li style="margin-left: 15px;"><a data-toggle="tab" onclick="loadCategories()">Categories</a></li><br>
<li><a data-toggle="tab" onclick="loadItems()">Items</a></li><br>
<li><a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a></li><br>
</ul>
</li>
</ul>
The view :
Have you tried to remove style="margin-left: 15px;" from you first element
ok try this
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<div class="dropdown-menu">
<a data-toggle="tab" onclick="loadCategories()">Categories</a>
<a data-toggle="tab" onclick="loadItems()">Items</a>
<a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a>
</div>
</li>
</ul>
I am getting multiple users from an API call and all are being generated with the same html and css. When I navigate the tabs of each user only the first user changes instead of the specific user. I have tried interpolating the id but comes to no effect. Here is the code.
<div *ngFor="let user of users" class="container emp-profile">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
</li>
<li class="nav-item">
<a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
</li>
</ul>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
You should not provide static id to html elements when using an *ngFor. You will get several html elements with the same id, so your <a> tags won't know where to go exactly and will target the first they encounter. That's why only your first user changes.
You can specify a dynamic id using Angular :
<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'
I have a problem editing an HTML page. I need to change the content on the second tab on the nav-tabs, the one with the name Anexos. I tried to create a new href, but this didn't work. What do I need to do?
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#adm_carteiras">Formulário</a></li>
<li><a data-toggle="tab" href="#utilizacao">Anexos</a></li>
<li><a data-toggle="tab" href="#utilizacao">Versões</a></li>
</ul>
<div class="tab-content">
<div id="adm_carteiras" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<div class="filtrar_cliente box" style="padding-bottom:25px;">
<div class="box_conteudo">
<div class="box_conteudo">
<h1 class="title_box">Solicitação de Viagem</h1>
<div class="adm_carteiras box">
<div class="box_conteudo">
<h4>Nome do Solicitante:</h4><br>
</div>
</div>
this is the correct bootstrap nav-tabs structure
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
This is currently the code I'm working with.
I want it to be able to switch tabs however it does not. I've tried taking off the active class however it still doesn't work.
I followed a tutorial to do it this way which didn't require JavaScript.
Can anyone help me find out why it is not working?
<div class="nav">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li><a data-toggle="tab" href="#Tournaments">Tournaments</a></li>
<li><a data-toggle="tab" href="#About">About</a></li>
<li><a data-toggle="tab" href="#Contact">Contact</a></li>
</ul>
</div>
<div class="tab-content">
<div id="Home" class="tab-pane fade">
<h3> example </h3>
</div>
<div id="Tournaments" class="tab-pane fade">
<h3>create images to show for new pages</h3>
</div>
<div id="About" class="tab-pane fade">
<h3>6214</h3>
</div>
<div id="Contact" class="tab-pane fade">
<h3>exds</h3>
</div>
</div>
You are missing all javascripts.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Refer to this : https://codepen.io/jrcanicula/pen/vmojRG