so i try to href links with specific table IDs so that when the link is opened the specific table id called will be the active tab opened( ie. www.gohome.com/html#profile). but no matter what i do the active tab still remains stagnant and specifically calling out tab id's dont seem to do anything.
This is my code:
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">me </li>
<li role="presentation">you</li>
</ul>
im starting to think it cant be done without me implementing some sort of script. but im not that good at coding. any form of help will be great. thanks n advance.
The trick in your case may be your references. You need to add JavaScript references for jQuery and bootstrap.js at the top of your html. That is what is doing the magic behind the functionality of showing and hiding different content based on the clicked tab.
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Here's a full working example of your code:
<head>
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
me
</li>
<li role="presentation">
you
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
</body>
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 am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});
Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>
I have 2 tables separated with two tabs.
Active and Inactive
Let's say I click a next button from the active tab. The content of the inactive tab shows but the active tab is still the Active tab. Am I missing something?
Lets say their corresponding IDs are #Active and #Inactive. This is the code of the next button:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>
From your code i guess that you're using bootstrap tabs so you should add click event in your JS code to detect the click on next button and send you to the second tab.
Hope this helps.
$('.next').click(function () {
$('#myTabs a[href="#inactive"]').tab('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class='container'>
<!-- Nav tabs --><br>
<ul class="nav nav-tabs" id='myTabs' role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="acitve">
table 1
</br>
<button class="btn next">Next</button>
</div>
<div role="tabpanel" class="tab-pane" id="inactive">
table 2
</div>
</div>
</div>
I'm trying to load pages when using the boostrap tab navigation, but it doesn't work. I tried to override the default action by creating a class names preventDefault and using jQuery, but it still doesn't work.
My code looks like this:
<div id="wrapper">
<!--About section-->
<div class="row">
<div class="col-sm-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Profile</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" ng-view>
information
</div>
</div>
</div>
</div>
<!--About section-->
<!--jQuery-->
<script src = "http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript">
$('.preventDefault').click(function(e) {
e.preventDefault();
});
</script>
My goal is to use ngRoute with Angular, so I can't use the standard tab system.
I don't see the target id eg id="profile" in the tab-pane
<div role="tabpanel" class="tab-pane active" ng-view id="profile">
information
</div>
I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:
<ul class="nav nav-pills" role="pilllist" id="myPill">
<li role="presentation" class="active">Show all</li>
<li role="presentation">Cars</li>
</ul>
<div class="pill-content">
<div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
<div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>
<script>
$(function () {
$('#myPill a:last').pill('show')
})
</script>
Why am I getting this error message?
You're using .pills('show'); where you should be using .tab('show'); as seen below:
$(function () {
$('#myPill a:last').tab('show')
});
Also, your HTML is incorrect for pills:
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation" class="active">Show All</li>
<li role="presentation">Cars</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>
<div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>
Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.
Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.
Take a look at this Bootply to see how the tabs work.