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
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.
My goal is to have the data-role collapsible, collapse after I click a tab link. Is there a solution for this or a better way to go about it? Thanks.
Here is my fiddle, notice the tabs change but the collapsible stays open, I tried to use a on click function but it didn't seem to do anything.
Any Ideas?
Jfiddle
HTML
<div data-role="tabs">
<div class="filter" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Filter</h4>
<ul data-role="listview" data-inset="false" >
<li><a class="collapse" href="#one" data-ajax="true">Suggested</a></li>
<li>Distance</li>
<li>Rating</li>
<li>Open Now</li>
<li>Test</li>
</ul>
</div>
<div id="one" class="tablist-content">
<!-- TAB 1 --->
1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div id="two" class="tablist-content" >
<!-- TAB 2 --->
2<br>2<br>2<br>2<br>2<br>2<br>2<br>
</div>
<div id="three" class="tablist-content" >
<!-- TAB 3 --->
3<br>3<br>3<br>3<br>3<br>3<br>3<br>
</div>
<div id="four" class="tablist-content" >
<!-- TAB 4 --->
4<br>4<br>4<br>4<br>4<br>
</div>
</div>
SCRIPT
$(document).ready(function() {
$(".collapse").click(function() {
console.log("ok");
$( ".filter" ).trigger( "collapse" );
});
});
HEAD
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You have two issues going on here. First, you have two versions of jQuery loaded.
https://code.jquery.com/jquery-1.11.3.min.js
and
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
This can provide collisions, so please remove one.
Secondly, the proper code to collapse is:
$( ".filter" ).collapsible( "collapse" );
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
});
});
});
Is it possible to order divs by class when clicking a menu link?
Here is my code:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director3 commercial"></div>
</div>
What I would like to do is when I click on a director or category in the menu I would like the divs with the connected class to be ordered at the top.
Here is an example: When I click on director2 in the menu I would like the code to change to this:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director3 commercial"></div>
</div>
Any thoughts on this?
Thanks in advance!
After you fix your HTML to be legal (close your divs), you can use this:
$(".directors-menu li").click(function() {
var cls = $(this).text();
var films = $(".films");
films.find("." + cls).each(function() {
films.prepend(this);
});
});
Working demo: http://jsfiddle.net/jfriend00/43muT/
And, a bit shorter version:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).text()).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/nLV2j/
It would better to put a custom attribute on the clickable items so the display text can be anything and you have direct control over the sort key like this:
Here's the HTML:
<ul class="directors-menu">
<li data-sort="director1">Sort by Director 1</li>
<li data-sort="director2">Sort by director 2</li>
<li data-sort="director3">Sort by director 3</li>
<li data-sort="commercial">commercial</li>
<li data-sort="promo">promo</li>
<li data-sort="short">short</li>
</ul>
<div class="films">
<div class="director2 commercial">d2</div>
<div class="director2 short">d2</div>
<div class="director1 commercial">d1</div>
<div class="director1 promo">d1</div>
<div class="director3 commercial">d3</div>
</div>
And, the code:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).data("sort")).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/GZhtr/
I think this is a nice way to do it
$(".directors-menu li").click(function(e){
$("div."+$(this).text()).prependTo("div.films");
});
Here is a fiddle http://jsfiddle.net/Vgt4s/
For sorting anything, the best jQuery plugin I have used is Tablesorter