I'm using the Scroll Javascript and have found the problem with the tabs, which is that it is conflicting with the scroll javascript. i.e.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">menu1 </a></li>
<li><a data-toggle="tab" href="#menu2">Menu2 </a></li>
<li><a data-toggle="tab" href="#menu3">Menu3</a></li>
</ul>
Is it possible to link to tabs without using the anchor? (#menu1)
Kind Regards,
You can use data-target attribute instead:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a data-target="#tab1" role="tab" data-toggle="tab">First Tab</a></li>
<li role="presentation"><a data-target="#tab2" role="tab" data-toggle="tab">Second Tab</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Content 1</div>
<div role="tabpanel" class="tab-pane" id="tab2">Content 2</div>
</div>
Here is a Working Fiddle
Appears so:
<div id="tabs">
<ul class="super">
<li><a>title 1</a></li>
<li><a>title 2 </a></li>
</ul>
<div>
content1
</div>
<div>
content2
</div>
</div>
<script>
$(function () {
$("#tabs ul.super li a").each(function (index) {
$(this).attr("href", "#spec" + index.toString());
});
$("#tabs div").each(function (index) {
$(this).attr("id", "spec" + index.toString());
})
$("#tabs").tabs();
});
</script>
Source: is it possible to use Tabs without using anchor tag and id?
I solved this by changing the following line from
var d = $("#scroller-anchor").offset({scroll:false}).top;
to
var d = $("#scroller-anchor").offset().top;
Related
I have this code in javascript that allows me to visit a page with a hashbang on it to visit a tab
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
This is an example link http://localhost/centosapp/info/configure#description
I am showing a tab on click using
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
this is the html
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url('info/configure'); ?>#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
...items are shown here
</div>
</div>
I want to be able to reload page so that to get new content from server when i click on a tab.How can i reload and show the tab clicked on bootstrap?
Solved it this way using a html data-* tag.
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#description" data-link="http://localhost/centosapp/info/configure#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" data-link="http://localhost/centosapp/info/configure#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals" data-link="http://localhost/centosapp/info/configure#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
and js
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show');
var links = $(this).attr("data-link");
window.location.href = links;
});
Works but a solution inside bootstrap would have worked better.
I'm trying to make a Javascript action when a bootstrap tab is opened. I can't get it to work. These are the scripts I've tried:
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
And
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
});
I have these scripts inside of the tabs themselves. I also tried:
$('ul.nav a').on('shown.bs.tab', function (e) {
instead of
$('.nav-tabs a').on('shown.bs.tab', function(){
Some HTML
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
<div id="2" class="tab-pane">
Tab 2 content...
</div>
What is going on?
You have to bind the event (addEventListener in terms of vanilla js)
$('ul.nav a').bind('click', function() { //bind whatever event you want
alert('User clicked on "foo."');
//vchart.redraw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
For example, assuming that the same tab as the above image exists, the 'Active' tab is specified as default.
However, my client wishes to keep this default option and open a new window that different tab will selected.(second 'Link' tab or something.)
Is this possible? If it can, how to do this?
assuming you are using Bootstrap, you can remove all the attributes related to tab behavior from the a.nav-link and instead use target:"_blank". Here in bellow example I have made added the New Page tab, there I have removed all the extra attributes and added target attribute.
This example may not work within this snippet since it is within the nested frame, and opening the _blank tab from nested tab would be messy, but it works on web page I have tested it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://stackoverflow.com/" target="_blank">New Page</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Page</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Page</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Page</div>
</div>
Assuming that you have div contains tab contents.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="link1" data-toggle="tab" href="?section=tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link2" data-toggle="tab" href="?section=tab2">Tab 2</a>
</li></ul>
Pass your div id as parameter section as href of li.
<div id="tab1">
</div>
<div id="tab2">
</div>
Then get the parameter, and scroll manually to the div.
<script>
const params = new URLSearchParams(window.location.search);
const section = params.get('section');
if(section!=''){
$('#' + section).addClass('active');
$('html, body').animate({
scrollTop: $('#' + section).offset().top
}, 2000);
}else{
//Default tab here
$('#tab1').addClass('active');
$('html, body').animate({
scrollTop: $('#tab1').offset().top
}, 2000);
}
</script>
Hope this would help.
I would like to be able to use bootstrap tabs but without using a unique selector.
I cannot guarantee that the selector is the only one in the dom.
I have many sub templates which are either included in the page as it is rendered or can be loaded inside a modal via ajax.
I do use id's but never in the templates i might use within a modal, some modals are preloaded after the page load event.
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a data-target=".pane1" data-toggle="tab" aria-expanded="true">pane 1</a></li>
<li><a data-target=".pane2" data-toggle="tab" aria-expanded="true">pane 2</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane pane1">pane 1</div>
<div class="tab-pane pane2">pane 2</div>
</div>
</div>
</div>
I have tried an onclick event on the anchor tag with just jquery which is less than ideal, but cannot get it to work with the .tab('show')
onclick="$(this).closest('.panel')
.find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"
Yes it is possible...for this HTML:
<div class="panel">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li>pane 1</li>
<li>pane 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane">pane 1</div>
<div class="tab-pane">pane 2</div>
</div>
</div>
</div>
This Javascript:
$('.panel .nav-tabs').on('click', 'a', function(e){
var tab = $(this).parent(),
tabIndex = tab.index(),
tabPanel = $(this).closest('.panel'),
tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
tabPanel.find('.active').removeClass('active');
tab.addClass('active');
tabPane.addClass('active');
});
See this functioning bootply
Note Take note that I removed all data attributes from the anchors to prevent bootstraps auto wireup to them**
This solution uses role attributes to control functionality rather than class names, all role are valid ARIA values. http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml. The solution works when nesting "tabpanels".
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a role="tab" data-toggle="tab">1</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">2</a></li>
<li role="presentation"><a role="tab" data-toggle="tab">3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel">1</div>
<div role="tabpanel">2</div>
<div role="tabpanel">3</div>
</div>
</div>
javascript
I modified bootstrap tabs "show" method to include this code these lines.
var $context = $this.closest('[role="tabpanel"]');
if($context.length && $target.length != 1){
if($target.length > 1){
$target = $context.find('[role="tabpanel"] ').eq($this.parent().index());
} else {
$target = $context.find(selector).length ? $context.find(selector) : $target;
}
}
Full method.
$.fn.tab.Constructor.prototype.show=function(){var t=this.element,e=t.closest("ul:not(.dropdown-menu)"),a=t.data("target");if(a||(a=t.attr("href"),a=a&&a.replace(/.*(?=#[^\s]*$)/,"")),!t.parent("li").hasClass("active")){var r=e.find(".active:last a"),n=$.Event("hide.bs.tab",{relatedTarget:t[0]}),i=$.Event("show.bs.tab",{relatedTarget:r[0]});if(r.trigger(n),t.trigger(i),!i.isDefaultPrevented()&&!n.isDefaultPrevented()){var l=$(a),s=t.closest('[role="tabpanel"]');s.length&&1!=l.length&&(l=l.length>1?s.find('.tab-pane, [role="tabpanel"] ').eq(t.parent().index()):s.find(a).length?s.find(a):l),this.activate(t.closest("li"),e),this.activate(l,l.parent(),function(){r.trigger({type:"hidden.bs.tab",relatedTarget:t[0]}),t.trigger({type:"shown.bs.tab",relatedTarget:r[0]})})}}};
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');
}
});