Hi I am new to bootstrap and jQuery. I have created a bootstrap Tab, which is working fine. The tabs are changing by header, but I also needs pagination to change Tab, which I am not able to do. Following is my scenario,
Tab 1 --> next button --> go to tab 2
Tab 1 <-- previous -- Tab 2 -- next ---> Tab 3
Tab 2 <-- previous -- Tab 3
Can any one help. Following is my HTML. This is just an example, I can have variable number of tabs.
<div class="row">
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li>
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
</div>
Updated jQuery script to attach to the previouse/next link.
Updated class="active" to the li tag for Question-1.
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
<script>
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
Related
I have attempted to take bits and pieces from other sources but I am unable to get the desired effect. I have multiple tabs which are currently pre-loaded, the content they are loading to be specific is a number of RSS feeds, as I have added more tabs the page has gradually taken longer to load, naturally.. I am at the point where I need to load the tabs content on click/trigger. What would be the best way to achieve this?
HTML
<div class="header">
<h4 class="title">Header</h4>
<p class="category">Some tagline here</p>
</div>
<div class="content content-full-width">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
USA
</li>
<li class="">
UK
</li>
<li class="">
AU
</li>
<li class="">
CA
</li>
<li class="">
NZ
</li>
</ul>
<div class="tab-content">
</br>
<div id="us" class="tab-pane active">
- Content Here -
</div>
<div id="uk" class="tab-pane">
- Content Here -
</div>
<div id="au" class="tab-pane">
- Content Here -
</div>
<div id="ca" class="tab-pane">
- Content Here -
</div>
<div id="nz" class="tab-pane">
- Content Here -
</div>
</div>
</div>
JSFiddle
https://jsfiddle.net/qvussf6t/1/
Thanks.
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
I want to include col-md-4 in content-tab but that not working image or text not hide if i click next tab. My target is Ihover plugins in 3 column but if i click next tab previous not hide
<ul class="nav nav-pils nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
It isn't working because Bootstrap columns must be a child of an element with the row class. Try this:
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="row">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
</div>
It is not working because loga, dtp and android tabs are child of webdesign tab. Hence, webdesign tab will display on default.
Try this:
<ul class="nav nav-pils nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div id="webdesign" class="section">
<div class="">
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
<div class="col-md-4">
<h1>fbbvasvba</h1>
</div>
</div>
</div>
<div id="loga" class="tab-pane fade">
<div id="dtp" class="tab-pane fade">
<h1>TEST</h1>
</div>
<div id="android" class="tab-pane fade">
<h1>TEST</h1>
</div>
</div>
</div>
This markup needed considerable cleanup, it's always a great idea to refer to the Bootstrap documentation for tabs and nav pills when you hit problems. Here's the code you need:
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
<li><a data-toggle="tab" href="#loga">test2</a></li>
<li><a data-toggle="tab" href="#dtp">test3</a></li>
<li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
<div class="col-md-4">
<h1>col1</h1>
</div>
<div class="col-md-4">
<h1>col2</h1>
</div>
<div class="col-md-4">
<h1>col3</h1>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="loga">
tab loga
</div>
<div role="tabpanel" class="tab-pane" id="dtp">
tab dtp
</div>
<div role="tabpanel" class="tab-pane" id="android">
tab android
</div>
</div>
Not sure I'd mix and match between nav-pills and nav-tabs, but that's your prerogative.
TL&DR: When using a col-* you need to make sure it has a parent that is a div class="row". The rational is a row establishes a complete boundary (end-to-end) and a col-* breaks that boundry into 'columns'/'sections'.
Solutions: Is provided by the accepted answer; This provides additional justification.
<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
<div class="col-md-4">
<h1>col1</h1>
</div>
<div class="col-md-4">
<h1>col2</h1>
</div>
<div class="col-md-4">
<h1>col3</h1>
</div>
</div>
I use Bootstrap nav-tabs. With the example below I have no problem if the page's URL is mypage
($stateProvider.state('ide', {url: '/mypage',...)
but I must have an id parameter
($stateProvider.state('ide', {url: '/mypage/:id',...)
that no longer works. I am redirected to the homepage of the site . Do you know how to change my code to make it work?
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
My link go to http://localhost:8080/#/mypage#tab2 instead of http://localhost:8080/#/mypage/1063#tab2
I find the solution:
In my AngularJS controller I add:
$scope.keepId=id;
In my HTML page, I add #/mypage/{{keepId}} in link:
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
I have a single page html code with 3 different Tabs in that.I have a requirement of chaining the URL for each tab.
I have seen some resources for changing the browser history using windows.history.pushState().But as far as I know It only changes changing with #extra-path.
But I am trying to achieve something like:
for tab1 .. mybasedomain.com/tab1
for tab2 .. mybasedomain.com/tab2
How do I achieve it?Can I achieve it using JavaScript, jQuery?
My code structure:
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li >
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
Try using history.replaceState()
$(".tab-links a").click(function(e) {
var active = this.href.slice(-5)
, link = active.slice(1);
console.log(active, link)
$(".tab-content [id^=tab]").hide();
$(active).show();
history.replaceState(null, link
, location.href.slice(-1) === "/"
? location.href + "/" + link
: link
)
})
.tab--inactive {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>