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/
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 know how to select / activate (programmatically) a tab in materializecss using jquery(as mentioned in documentation):
$('ul.tabs').tabs('select_tab', 'tab_id');
But how to get an id of an active(selected) tab in materializecss using javascript or jquery when I click a button?
You can use the active class to get the current active tab. And hence can get the id of the current tab. Below is a demo
$(document).ready(function(){
$('ul.tabs').tabs();
});
$('#getID').click(function(){
console.log("Active Tab:"+$(".active").attr('id'));
console.log("Active Tab Div:"+$(".active").attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2" id="2test">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
<button id="getID">
GetID
</button>
Although above techniques might be ok there is official way to do it in materializecss.:
$('ul.tabs').tabs({
onShow: onShow,//Function to be called on tab Show event
swipeable: false,
responsiveThreshold: Infinity // breakpoint for swipeable
});
function onShow(tabOBJ){
console.log(tabOBJ.selector);
}
I hope this might help you and others.
You can use jquery. As the active tab will has the class active you can use it for getting the tab id.
$(function(){
$('#submit').click(function(){
alert($(".active").attr('id'));
});
});
A working fiddle here
http://jsfiddle.net/UTux2/
try this
$("ul.tabs > li > a").click(function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;});
var hash = window.location.hash;
$('ul.tabs').tabs('select_tab', hash);
make hash id first then place that in place tab_id
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();
}
}
I've been searching how to replace content with navbar, and I found this site : Nested Content with Navbars using jQuery Mobile, & completely can't understand how's the javascript works. yes, I'm a newbie in this field.
so, somehow he managed to create content like this with this code :
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="one">One content</div>
<div id="two">Two content</div>
<div id="three">Three content</div>
</div>
</div>
and
(function($) {
// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
{
// If the new page is not being loaded by URL, bail
if (typeof data.toPage !== "string")
{
return;
}
// If the new page has a corresponding navbar link, activate its content div
var url = $.mobile.path.parseUrl(data.toPage);
var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
if ($a.length)
{
// Suppress normal page change handling since we're handling it here for this case
e.preventDefault();
}
// If the new page has a navbar, activate the content div for its active item
else
{
$a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");
// Allow normal page change handling to continue in this case so the new page finishes rendering
}
// Show the content div to be activated and hide other content divs for this page
var $content = $($a.attr("href"));
$content.siblings().hide();
$content.show();
});
})(jQuery);
I was going to create 3 contents with my navbars, and here's my code :
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Home</li>
<li>V-Map</li>
<li>Login</li>
</ul>
</div>
</div>
<div data-role="content" align="center" style="margin:2em 1em 2em 1em;">
<div id="one">First Content</div>
<div id="two">Second Content</div>
<div id="three">Third Content</div>
</div>
I don't have a previous page like the sample gave, can anyone help me with the javascript?
Make sure you reference to jQuery, jQuery Mobile libraries in your code.
I assume the problem with the previous button is, that you don't have a page and header div wrapper.
You have to use his exact markup, including the page and header div.
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="one">One content</div>
<div id="two">Two content</div>
<div id="three">Three content</div>
</div>
</div>
I am trying to hide the current tab which is displayed and fadein the new tab based on its href using jquery...
Here is my HTML
<div id="leader">
<ul id="llist">
<li class="t current"><span>sage solutions</span></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
<div id="lcontent">
<div id="solutions" class="tab">
<h2>Title</h2>
Description
</div>
<div id="management" class="tab">
<h2>Title</h2>
Description
</div>
<div id="thirdparty" class="tab">
<h2>Title</h2>
Description
</div>
</div>
</div>
And the JQUERY (which also slides an image to the tab which is selected)
$('#leader #llist li').click(function() {
$('#leader #llist li').removeClass('current');
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
$(this).addClass('current');
$('.tab').fadeOut();
});
The current tabs dont currently fadeout or fadein when the links in the list are clicked...any help would be appreciated.
Here is an example of what I think you are looking for.
http://jsbin.com/iceli4/edit
Hope this gets you started.
Bob