I have a tab bootstarp and a title for my page and I want to change the title of page with click on tab is active but my jquery code donot work correctly.
$(document.body).on('click', '.chooseChangePass li a', function(e) {
if ($("#chPass").hasClass("active")) {
$("#TitlePage").html("change Password");
} else {
$("#TitlePage").html("change UserName");
}
if ($("#chUserName").hasClass("active")) {
$("#TitlePage").html("change UserName");
} else {
$("#TitlePage").html("change Password ");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="TitlePage">change password</h1>
<ul class="chooseChangePass">
<li class="active" id="chPass">change password</li>
<li id="chUserName">change UserName</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="changeUserName">
changeUserName
</div>
<div role="tabpanel" class="tab-pane fade in active" id="changePassword">
changePassword
</div>
</div>
You are missing code, that toggles active class. Add bootstrap.min.js file. Also, else statements in your code are redundant.
Correct way of changing page title after tab changes is to use Bootstrap navs events. You need to listen for shown.bs.tab event.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#page-title').html(e.target.text);
});
Here's working example with Bootstrap 4.1.3: https://codepen.io/anon/pen/OrJOQE?editors=1010
Be sure to lookup documentation for Boostrap version that you are using, as there were significant changes between version 3 and 4. And change tab selector to named one, if you are planning to have more tab groups on same page.
Related
I am using MVC-5 and in my view i have a number of divs arranged horizontally and just below each divs i have tabs.
Each div is arranged such that it contains tabs just below it.
Now what i have to do ?
I have to click on div and upon clicking the div must automatically click the tab just below it.(i don't want manual )
My try to do it :
I have created a Onclick event of div and i have assigned ID to that tab.
But the problem is that tab is never clicked on clicing to the respectivce div.
My code to do so is:
<div class="panel-body">
<div class="col-md-2" id="Active" onclick="activeCircleClick('tab1')">
<div id="active" style="height: 125px;">
//here is something
</div>
</div>
</div>
<div style="width:1300px;">
<div style="width:100%;">
<ul class="nav nav-tabs nav-pills nav-justified" role="tablist" id="myTab">
<li class="active" id="activeList">
Active device list
<span class="col-md-12" id="activeDeviceStatus" style="text-align: center;"></span>
</li>
</ul>
</div>
<script>
function activeCircleClick(el)
{
alert("test1:" +el);
selectTab(el);
}
function selectTab(tabId)
{
alert('test2:' + tabId);
var tab = $("#" + tabId);
if (typeof tab != 'undefined')
{
e.preventDefault()
tab.tab('show');
}
}
</script>
My both the alert message popups but it don't click the tab below this div which i have clicked.
How to make it happen ?
I just soved my issue by doing this:
function activeCircleClick(el)
{
$('#tab1').bind('click', function () { });
$('#tab1').trigger('click');
}
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'
The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.
Demo
HTML
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Account</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane fade active" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane fade active" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane fade active" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
JS
$('.nav-tabs > li').mouseover( function(){
$(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:
TAB1 CONTENT
TAB2 OTHER CONTENT
In my actual version you don't have to move as fast for the problem to occur.
It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the HTML:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
Updated your fiddle: http://jsfiddle.net/VPn52/1/
maybe you can try my solution.
i try this solution in my code and it works.
for hover solution, i follow solution from here:
http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery(this).tab('show');
});
add this line (line 3 or after .. e.preventDefault(); .. )
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
and this line (after .. jQuery(this).tab('show') .. )
jQuery(tabContentSelector).addClass('active');
so the code become like this:
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
jQuery(this).tab('show');
jQuery(tabContentSelector).addClass('active');
});
What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:
var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
var $tab = $(this).find('a');
if (!tabFadingIn) {
tabFadingIn = true;
$tab.one('shown.bs.tab', function() {
tabFadingIn = false;
});
$tab.tab('show');
}
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Found sollution for me.
Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.
Im currently creating a site which has a div like below:
<div class="container">
<div class="one-third column">
<a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a>
</div>
<div class="one-third column">
<a id="tab2" href="inc/tab2.html"><h2>tab2</h2></a>
</div>
<div class="one-third column">
<a id="tab3" href="inc/tab3.html"><h2>tab3</h2></a>
</div>
</div>
<div class="container" style="margin:100px 0;">
<div id="information">
</div>
</div>
Then i would like the content from the external page (which is basically just a div with a little bit of content in it) to be loaded into the div with id="information"
I tried using this but it just sends me to an external page?
<script type="text/javascript">
$(#tab1).click(function() {
$('#information').load("inc/tab1.html");
return false;
});
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
$(#tab3).click(function() {
$('#information').load("inc/tab3.html");
return false;
});
</script>
Also by doing it this way is the content that is currently in the div hidden once the new content is loaded?
Then i was wondering how to add animation to the loaded content?
try changing:
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
to
$("#tab2").click(function(e) {
$('#information').load("inc/tab2.html");
e.preventDefault();
});
Notice the quotes around tab2 (you need to have those unless it's body, document.
Also notice the e in function(e). With that you can prevent a link from redirecting to another page with the code e.preventDefault() inside of that function.
That's because there are several syntax errors in your code, you are missing quotes for the selectors.
$('#tab...').click(function() {
// ...
});
You can also use the href properties instead of having several handlers:
jQuery(function($) {
$('.one-third a').click(function(e) {
e.peventDefault();
$('#information').load(this.href);
});
})
i have this tab in bootstrap:
<ul class="nav nav-tabs" id="feedtab">
<li class="active">Atlass</li>
<li>Aviation</li>
<li>Processing</li>
<li>IT&S</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="atlass"><div id="updates" data-id-type="1"><div class="alert alert-default well" style="background-color: #f1f1f1"><i class="fa fa-spinner fa-spin"></i> Portal is Initilizing... Please Wait.</div></div></div>
<div class="tab-pane" id="avi"><div class="well" style="background-color: lightsteelblue;">Aviation Feed Will go here.</div></div>
<div class="tab-pane" id="proc"><div class="well" style="background-color: lightsteelblue;">Processing Feed Will go here.</div></div>
<div class="tab-pane" id="it"><div class="well" style="background-color: lightsteelblue;">IT&S Feed will go here.</div></div>
</div>
How do i have an event or soemthing in jquery for when the active tab is changed?
i want to call a javascript function when the active tab is changed.
i've tried this but dosent work:
<script>
$('#feedtab [data-toggle="tab"]').on('shown.bs.tab', function (e)
{
alert('test');
})
</script>
Straight out of the documentation
There are two events that get fired
show.bs.tab & shown.bs.tab as their name implies one gets fired before the new content is shown, the other one right after.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//e.target -> activated tab
//e.relatedTarget -> previous tab
});