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>
Related
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>
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 am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.
Thanks
HTML
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell">
Stages
<div id="toggle1" class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
Javascript
if(document.getElementById("toggle1").className == 'toggle active')
{
$('#Stage1').show();
}
else
{
$('#Stage1').hide();
}
you should use a handle to show/hide your element.
visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp
check this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var status = 'show';
function change()
{
if(status == 'show')
{
document.getElementById("toggle1").style.display = 'none';
status = 'hide';
}
else
{
document.getElementById("toggle1").style.display = 'block';
status = 'show';
}
}
</script>
</head>
<body>
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell" onclick="change()">
Stages (click here)
<div id="toggle1" class="toggle">this is test
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell" >
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
</body>
</html>
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>