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
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 two pages. My main page contains links in different places within this page to perform actions such as Edit profile, Change my Password, Upload a profile picture etc.
Main page 'index.html'
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
My second page 'accounts.html' uses Bootstrap Nav Tabs.
<ul class="nav nav-tabs">
<li class="active"> Edit my profile</li>
<li class="">Change my Password</li>
<li class="">Upload Photo</li>
</ul>
<div class="tab-pane" id="editProfile">
BARK BARK
</div>
<div class="tab-pane" id="changePassword">
WOFF WOFF
</div>
<div class="tab-pane" id="uploadPhoto">
MEOW MEOW
</div>
How do I click the link on the main page and open the correct corresponding Bootstrap Tab on the second page?
<!-- CLICK ON LINK WITHIN MAIN PAGE -->
$('#editProfile').on('click', function() {
$('body').load( "accounts.html" ).find('active').removeClass('active');
$('li.active').addClass('active');
});
I think you can use localStorage for this solution. The first, save id of the selected tab that you click on index.html into localStorage. And then, on the account.html you get value selected tab from localStorage. Here is the sample, hope to help, my friend!
--In the index.html
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
$(document).ready(function(){
$('a').on('click', function(e){
localStorage.setItem('activeTab', $(e.target).attr('id'));
window.location.replace("accounts.html");
});
});
--In the account.html
<ul class="nav nav-tabs">
<li class="active" id="lieditProfile">
Edit my profile
</li>
<li class="" id="lichangePass">
Change my Password
</li>
<li class="" id="liuploadPhoto">
Upload Photo
</li>
</ul>
<div class="tab-content">
<div id="editProfile" class="tab-pane fade in active">
<h3>Edit the profile.</h3>
</div>
<div id="changePass" class="tab-pane fade">
<h3>Change Password</h3>
</div>
<div id="uploadPhoto" class="tab-pane fade">
<h3>Upload Photo</h3>
</div>
</div>
<script>
$(document).ready(function(){
var activeTab = localStorage.getItem('activeTab');
$('li').removeClass();
$('#li'+ activeTab).addClass('active');
$('.tab-pane').removeClass('in active');
$('#' + activeTab).addClass('in active show');
});
</script>
I've been Googling for the past 2 days trying to figure out how to add events to my tabs, but I'm having trouble getting any of the solutions to work. I'm completely over my head with this stuff, so please include simple explanations. What I have so far are some tabs (in which I just copied and pasted):
<div id="tabs" role="tabpanel">
<!-- Nav tabs -->
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
<li role="presentation">Retired</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Active"></div>
<div role="tabpanel" class="tab-pane" id="Inactive"></div>
<div role="tabpanel" class="tab-pane" id="Retired"></div>
</div>
</div>
I also copied and pasted a JavaScript function that looks unlike any other JavaScript function I've dealt with and it doesn't work(the alert statement is never fired):
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
alert(Tab 1!);
}
if ($activeTab == 2){}
if ($activeTab == 3){}
}
});
});
</script>
I'm using the Spring MVC and my intention is to send the value of the tab back to the controller through a JavaScript function (as I see no other way around it). Based on that value, a table on the page is populated with certain data ('modules' in this case). I've created a controller method and I'm not sure whether it should be get or post or how to get the tab values in there. Here's my attempted controller method code:
#RequestMapping(method = RequestMethod.POST, value = "/update")
public final String changeTab(final ModelMap model, #RequestParam(value = "id") String id) {
System.out.println(id);
//model.addAttribute("modules", moduleDao.sortStatus(status));
return "module/admin";
}
What can I do to my code to achieve this? Am I even on the right track? Any help is much appreciated.
There are couple of issues with you tab creation html. Attached is your modified code that works when I gave it a try. You were missing id attribute on tab div that should match href. Hope this helps with the jQuery part.
W.r.t to the second question on binding with spring, now that you have event handler attached to your tabs, you can trigger a AJAX post or get from the event handler based on the tab and send the values of tab (am not sure what value you wanted to send). You can check how to do get/post from "http://api.jquery.com/jquery.ajax/". Your question does not explain me what sort of response you are expecting from controller, so I cannot help you on that. Hope this helps.
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function(event ,ui){
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
alert("tab1");
}
}
});
});
</script>
<body>
<div id="tabs" role="tabpanel">
<!-- Nav tabs -->
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
<li role="presentation">Retired</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane active" ></div>
<div id="tabs-2" role="tabpanel" class="tab-pane" ></div>
<div id="tabs-3" role="tabpanel" class="tab-pane" ></div>
</div>
</div>
</body>
[edited]
There's something in your HTML that's breaking the jQuery tabs code.
Consider this fiddle: http://jsfiddle.net/1r712od4/2/ - it works fine.
Try taking the unneeded aria-controls and classes from your code and trying again.
The JS you need is something like:
$('#tabs').tabs({
activate: function (event, ui) {
var activeTab = ui.newTab.data("tabid");
if (activeTab == 1) {
alert ("Tab 1!");
}
}
});
As for the Spring code, someone else will have to help you out with that!
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.
I have which have two links. First goes to page with default activated tab, and second link - to second tab.
I alway get default tab activated.
Here is my js code(opens tab #home):
$('.activate_tab').click(function(e){
$('#myTab a[href="#profile"]').tab('show');
});
tried also(not doing anything):
$('.activate_tab').click(function(e){
e.preventDefault();
$('#myTab a[href="#profile"]').tab('show');
});
and my default Bootstrap HTML code:
<ul id="myTab" class="nav nav-tabs">
<li class="reports active left"><a href="#home" data-toggle="tab" >Details</a></li>
<li class="reports right not_active" >Analytics</li>
</ul>
...
<div class="tab-pane fade in active" id="home">//default
...
<div class="tab-pane fade" id="profile">//not default
...
//link on other page, which should activate default( home )tab
http://super.com
//link on other page, which should activate not default tab
<img alt="" height="19" src="http://127.0.0.1:3000/assets/analytics.png" >
What I'm missing guys ?
I changed my link:
aaa
and my JavaScript:
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
$('.activate_tab').click(function(e){
$('#myTab a[href="#profile"]').tab('show');
});
try this
<div class="tab-pane fade" id="home">//default
...
<div class="tab-pane fade in active" id="profile">//not default
or you can try on your second link page
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(1) a').tab('show');