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.
Related
i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.
I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118
I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.
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 am using jquery tabs to create 3 tabs and following is my html code
<div id="sections" class="sections">
<ul class="sections" role="tablist">
<li class="active" role="presentation">
User
</li>
<li role="presentation">
Setting
</li>
<li role="presentation">
Customer
</li>
</ul>
<div class="tab-content">
<section id="user" class="panel" role="tabpanel">
Some content is here
</section>
<section id="setting" class="panel" role="tabpanel">
Some content is here
</section>
<section id="customer" class="panel" role="tabpanel">
Some content is here
</section>
</div>
And initilizing the tabs like
$('#sections').tabs();
Now when I access the page with /#setting at url end it briefly opens User Tab first before showing the Setting tab. How can I avoid this?
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>
Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>
The bad thing is just have some copy of the nav-tab codes