here is my code .. i want to open facebook when i click on second tab ie tab2
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>No Data Available</p>
</div>
<div id="tab2" class="tab_content" >
</div>
<div id="tab3" class="tab_content">
</div>
<div id="tab4" class="tab_content">
</div>
</div>
</div>
</body>
</html>
How about:
<li>tab2</li>
Though I will say making a tab a link is highly unintuitive and not good UI practice.
Change
<li>tab2</li>
to
<li>tab2</li>
Then set href='http://www.facebook.com' to tag2 like this :
<li>tab2</li>
You need to exclude the Facebook link from the click event so that you can use a normal link in its place.
Change the click event code to:
$("ul.tabs li:not(.external)").click(function() {
...
and the tab that should open Facebook to
<li class="external">tab2</li>
Demo: http://jsfiddle.net/eBHa5/
Related
I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/
Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/
Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>
You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/
I have a problem with Tooltip hover. What I need is to display the message when I click the button.
Now it's showing on hover.
Here is my code.
<div class="container">
<ul class="list-inline">
<li>Top</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Use popover instead of tooltip
<div class="container">
<ul class="list-inline">
<li>Top</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
I have the following jquery code implemented:
$( "#admitpage" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#admitpage li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
The HTML is similar to this:
<div id="admitpage">
<div class="navigation">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
<div class="tab" id="tab-1">
<p>Tab 1 content</p>
<a class="next" href="#tab-2">Next</a>
</div>
<div class="tab" id="tab-2">
<p>Tab 2 content</p>
</div>
</div>
Now the problem is, a.next doesn't work. I guess because it is within a tab already. How do I make it work? Any help would be greatly appreciated. I've been trying to resolve this for the past hour.
The simplest solution would be to attach a click event to that link. Something like
$(".next").click(
function() {
var currentIdx = $('#admitpage').tabs('option', 'active');
$("#admitpage").tabs({
active: currentIdx + 1
});
return false;
}
);
You need to manually handle it.
First we should set the active tab to the new tab using the active option, and then call refresh
$("#admitpage").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#admitpage li").removeClass("ui-corner-top").addClass("ui-corner-left");
$(".next").click(function(e) {
e.preventDefault();
var index = parseInt(this.href.split("#tab-")[1]) - 1;
$("#admitpage").tabs("option", "active", index).tabs("refresh");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="admitpage">
<div class="navigation">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
</ul>
</div>
<div class="tab" id="tab-1">
<p>Tab 1 content</p>
<a class="next" href="#tab-2">Next</a>
</div>
<div class="tab" id="tab-2">
<p>Tab 2 content</p>
</div>
</div>
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.
I'm using the following code for tabs, it works really nicely but I haven't figured out how to show multiple tab sets on the same page properly, would really appreciate it, if someone could give me a little help.
$("ul.tabs li.label").hide();
$(".tab-set > div").hide();
$(".tab-set > div").eq(0).show();
$("ul.tabs a").click(
function() {
$("ul.tabs a.selected").removeClass('selected');
$(".tab-set > div").hide();
$(""+$(this).attr("href")).fadeIn('slow');
$(this).addClass('selected');
return false;
}
);
$("#toggle-label").click( function() {
$(".tabs li.label").toggle();
return false;
});
$("ul.tabs a[href="+location.hash+"]").click();
HTML:
<!-- tab group 1 -->
<div class="widget">
<ul class="tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tab-set">
<div id="1">
tab1
</div>
<div id="2">
tab2
</div>
</div>
</div>
<!-- tab group 2 -->
<div class="widget">
<ul class="tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tab-set">
<div id="3">
tab1
</div>
<div id="4">
tab2
</div>
</div>
</div>