I have tabs in Bootstrap:
<ul class="nav nav-tabs" role="tablist">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
</ul>
<p id="message"></p>
How can I make it so that when no tab is clicked a message 'Please select a tab' is shown?
I have made a <p id="message"></p> underneath the tabs, I just need to insert the message when no tab is clicked and remove the message when a tab is clicked but I'm not sure how to check.
For Bootstrap tabs you also need content containers. In this case I would put message div into tab-content div:
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" 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>
<p id="message">Please select some tab</p>
</div>
... and make it hide in case anything is selected with simple CSS rule:
.tab-pane.active ~ #message {
display: none;
}
.tab-pane.active ~ #message {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<p id="message">Please select some tab</p>
</div>
Demo: http://plnkr.co/edit/1VaF3NoTRK4X2pnd651G?p=info
The solution #dfsq has posted is more elegant as compared to what follows. However, if your situation doesn't allow you to change your HTML markup, here is another way to do it.
var selectedTab = $('.nav-tabs li.active');
if(selectedTab.length === 0){
$('#message').html('Please select tab');
}
The bootstrap has 'shown.bs.tab' event to capture if the tab is clicked. you can make use of it as shown below.
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log(e.target) // activated tab
})
In BootStrap when a tab is clicked the the corresponding li element gets an active class, while the other li tags don't have this class until clicked.
You can use the following code to check if any tab is clicked:
$(function(){
CheckTabClick()
})
$(".nav-tabs li").click(function(){
CheckTabClick()
})
function CheckTabClick(){
var tab_clicked = $(".nav-tabs li.active")
if (tab_clicked.length == 0){
$("#message").show();
}
else{
$("#message").hide();
}
}
Related
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
I have an about page with different tabs that I want to link to individually through my footer. I've checked out other solutions to this but I'm not sure of two things. I've tried to use the following javascript to solve this, but I'm not sure how to configure what is here:
A) How do I configure the JavaScript to work with my HTML?
B) Do I need to duplicate the following JS for each tab on the page?
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('/info#advertise-tab')) {
$('.nav-tabs li a[href="info' + url.split('#')[1] + 'advertise-tab"]').tab('shown.bs.tab');
}
// Change hash for page-reload
$('.nav-tabs li a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
My page's view:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="advertise-li">Advertise</li>
<li role="presentation" id="legal-li">Legal</li>
</ul>
<div class="tab-content" id="infoTabContent">
<div role="tabpanel" class="tab-pane fade" id="advertise-tab">
<p>stuff</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="legal-tab">
<p>other stuff</p>
</div>
</div>
Page footer links:
Advertise
Legal
Here is the jsfiddle
I am having trouble with removing a class from an element when a separate div is closed.
You can see from my code below and my Fiddle
I have a jquery tabbed menu going that starts off with nothing open by default. When you click on a tab, the content is opened and the tab is highlighted. However if you click that same tab again and close the content the tab remains highlighted.
I have tried removeClass but with no success.
JS
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).slideToggle();
});
});
HTML
<div id="tabs-container">
<div class="tabs-menu">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
<div class="tab">
<div id="tab-1" class="tab-content">
Hello
</div>
<div id="tab-2" class="tab-content">
Number Two
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
<div id="tab-4" class="tab-content">
Bye
</div>
</div>
</div>
Use the toggleClass function to add/remove the class
$(this).parent().toggleClass("current");
demo:http://jsfiddle.net/Us8uc/6747/
My goal is to click in dropdown menu (div id=cssmenu) elements and display data in the using AJAX , so i made a small js code but i don't know how can i make it to load in the div i mentioned and erase the content that div displayed before.
html
<body>
<div class="container">
<div class="row">
<div class="col-md-3" >
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Project</span></a></li>
<li class='last'><a href='#'><span>Team</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>News</span></a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
<li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
<li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
</ul>
<div class="tab-content">
<div id="tab_quick" class="tab-pane active"></div>
<div id="tab_advanc" class="tab-pane active"></div>
<div id="tab_struct" class="tab-pane active"></div>
</div>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
Javascript
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
});
For example in the Menu, when i click Home i would like it to load it's data-url attr in the div id=tabs , i.e, replacing all the contents by Home data-url. Thanks !
You can try the following:
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).data('url'); // this is the correct syntax
var pane = $(this);
$('#tabs').load(url, function(result){ // load the content directly to #tabs
pane.tab('show'); // display the tab
});
});
});
In my page i use bootstrap's tab, but when i click each of tab, content of tab doesn't show correctly, this is my code:
<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">Home</li>
<li>Favoriets</li>
<li>Friends</li>
<li>Experience</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab-home">
HOME
</div>
<div class="tab-pane fade active" id="tab-fav">
My favoriets
</div>
<div class="tab-pane fade active" id="tab-fr">
My Friends
</div>
<div class="tab-pane fade active" id="tab-ex">
My experience
</div>
</div>
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
</div>
JSFIDDLE
Where am i wrong? How can i fix it?
You have active class on all tab-pane divs. Remove it from all of them but the first one. BTW, in bootstrap 3, the event it is not show, it is shown.bs.tab Bootstrap 3 tabs.
I personally use this code: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink, the only change I made, was to replace the on('show' with on('shown.bs.tab' .
On your JSFiddle a reference to the jQuery library is missing. Once adding a jQuery reference under Frameworks & Extensions it's switching tab content.
Under the Bootstrap documentation is states that jQuery is required for bootstrap javascript features: http://getbootstrap.com/getting-started/#whats-included
Also, your function is being using jQuery notation.