So I'm trying to create a set of tabs, however, the content isn't hiding when I move tabs it just gets stacked.
Here is my code
HTML
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>
JS
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
$('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
Active is being placed on the tab and the content is showing, however, I can't seem to make the previous tab content to disappear.
So any help or a solution would be helpful.
Thanks.
I'd create a reference to the current shown panel every time that click function is run, and hide the previous if it exists.
let current = null;
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
current = $('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
if (current) {
current.hide();
}
current = $(target);
//link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>
Your problem is in the .show() when you first start the page, this adds some inline code to the element display: block;, which overrides your styling for the panels (i.e. hiding those without .active) because inline styles are prioritised over class stylings.
You can simplify your code a little if you would like, I've provided some code below that has the same functionality you are aiming for. This works for any number of tabs on a page, but does not let you have a tab group within another (i.e. as a child). It does require you to add the class .feature-tabs-wrapper in a parent div that wraps both the menu links and the panels (see the third line of the demo HTML below).
Let me know if you needed something else.
Demo
// Activate the first panel for any tab setup on the page
$(".feature-tabs-wrapper").each(function() {
$(this).find(".tab-panel").first().addClass("active");
})
// Add click event to the tab links
$(".feature-tabs > li > a").click(function() {
// Remove active panel from any of the associated tabs
$(this).closest(".feature-tabs-wrapper").find(".tab-panel.active").removeClass("active");
// Get id of tab panel to be activated
var tabID = $(this).attr("href");
// Activate that tab panel
$(tabID).addClass("active");
});
.tab-panel {
display: none;
}
.tab-panel.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container feature-tabs-wrapper">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>
this code work for me
u can try it
code html
<section class="product-features">
<section class="container">
<ul class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</ul>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel active">
a
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel hidden">
b
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel hidden">
c
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
code jquery
(function () {
var $tabNavigation = $(".feature-tabs a");
if ($tabNavigation.length > 0) {
$tabNavigation.on("click", function (e) {
$('body').find('.feature-tabs li').each(function (index, value) {
$(value).removeClass('active');
})
$(this).tab("show");
$('body').find('.tab-panel').each(function (index, value) {
if (!$(value).hasClass('active')) {
$(this).addClass('hidden');
} else {
$(this).removeClass('hidden');
}
})
e.preventDefault();
return false;
});
}
})();
Related
I have code where the primary function is when a tab is clicked. The tab will highlight and move to that section of the code. The Character tab works and the About tab just takes me to the top of the page so I don't know for sure if that's working. However the Contact Us tab and the Battle Drives tab is complete wrong. The contact us tab takes me to the battle drive tab and the Battle Drive tab takes me below it. I want to create a function where when a tab is pressed it takes exactly to that specific element/section. Would it make more sense to add the id's to a specific element where it's being used instead of just adding to a div element.
const makeNavLinksSmooth = () => {
const navLinks = document.querySelectorAll('.nav-tab'); // add the name of the class you want to highlight when section appears
// this for loop checks all the elemnts which have class '.nav-tab' and adds a click event to it so it can scroll to that section
for (let n in navLinks) {
if (navLinks.hasOwnProperty(n)) {
navLinks[n].addEventListener('click', e => {
e.preventDefault();
document.querySelector(navLinks[n].hash)
.scrollIntoView({
behavior: "smooth"
});
});
}
}
}
const spyScrolling = () => {
const sections = document.querySelectorAll('.panel'); // a common name give to each section to identify them
// on scroll will highligh the nav item when reaches to the specific section
window.onscroll = () => {
const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
for (let s in sections) {
console.log(scrollPos, sections[s].offsetTop)
if (sections.hasOwnProperty(s) && sections[s].offsetTop <= scrollPos + 100) {
const id = sections[s].id;
document.querySelector('.active').classList.remove('active');
document.querySelector(`a[href*=${ id }]`).parentNode.classList.add('active');
}
}
}
}
makeNavLinksSmooth();
spyScrolling();
<body class="scroll-area" data-spy="scroll" data-offset="0">
<header class="section">
<!-- container -->
<div class="">
<div class="col-xs-3">
<img src="images/ShoeJackCityLogo.png" class="img logo">
</div>
<nav id="site-nav">
<ul class="group">
<li>Twitter</li>
<li><a class="nav-tab" href="#characters">Characters</a></li>
<li><a class="nav-tab" href="#battle_drives">Battle Drives</a></li>
<li class="active"><a class="nav-tab" href="#about">About</a></li>
<li><a class="nav-tab" href="#follow_us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div class="content-area group section">
<!-- container -->
<div class="container panel" id="about">
<!-- row -->
<div class="Title">
<h1>ShoeJackCity</h1>
<p>SJC is a mobile game where you can buy, sell, and play in a compettive 11v1 fighting tournament against real users to win sneakers.</p>
</div>
<div class="row">
<div class="col col-sm-8 col-lg-8">
<div class="game-play">
<video controls>
<source src="videos/RPReplay_Final1595357560.MP4" type="video/MP4">
</video>
</div>
</div>
<div class="col col-sm-4 col-lg-4">
<h3>About</h3>
<p>Shoe Jack City is a first of its kind mobile gaming resell app that allows players to buy,sell, and compete for rare, high-end sneakers in a tournament style battle royale.</p>
<p>Inspired by the MegaMan Battle Network Series, players can choose thier Anomalies, collect battle drives to unleash powerful attacks and hidden abilities.</p>
<p>Buy and/or sell sneakers, and Dominate your way against friends and compete in 1v1 tournament battle royale to win top tier sneakers and reduce your sellers transaction fee!</p>
</div>
</div>
</div>
<!-- container -->
<div class="container panel" id="follow_us">
<!-- row -->
<h1 class="m-2">Follow us/Contact Us</h1>
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-8">
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-twitter">
<p>Twitter</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-insta">
<p>Instagram</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-facebook">
<p>Facebook</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<form>
<div class="box-b">
<input id="email" class="email-input" type="email" name="email" placeholder="Email">
</div>
<input type="submit" value="Subscribe" class="subscribe-button">
</form>
</div>
</div>
</div>
<div class="container panel" id="battle_drives">
<!-- row -->
<div class="row">
<!-- col -->
<h2>Battle Drives</h2>
<div class=" push-down-sm">
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Slices 1 enemy directly Slices 1 enemy directly Slices 1 enemy directly ahead. Range is 2 spaces, 80dmg, 40MB, LVL 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>AreaAdvance: Steals up to the first 4 available spaces. MB: 200, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- /row -->
<!-- row -->
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /container -->
<!-- container -->
</div>
<div class="container p-2 panel" id="characters">
<div class="row">
<h2 class="">Characters</h2>
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Marbelle_ingame_concept.png">
</div>
<!-- /col -->
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Ade_ingame_concept.png">
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<footer>
<p>© 2014 - This is the footer.</p>
</footer>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 3000px;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>
</head>
<body>
<h1>Change Background Gradient on Scroll</h1>
<h2>Linear Gradient - Top to Bottom</h2>
<p>This linear gradient starts at the top. It starts green, transitioning to blue.</p>
<h2 style="position:fixed;">Scroll to see the effect.</h2>
</body>
</html>
for more information follow this link
https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp
I have multiple projects with content (overview, details). I am very new to JQuery
How can I replace the content in the same location instead of below?
How do I keep the content on other projects from disappearing?
HTML:
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1-->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>First Project Title</h3>
<div class="project-desc">
<div class="div1">
<p>First project overview here</p>
</div>
<div class="div2" style="opacity:0">
<p>More detailed description here</p>
</div>
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>Second Project Title</h3>
<div class="project-desc">
<div class="div3">
<p>Second project overview here</p>
</div>
<div class="div4" style="opacity:0">
<p>More detailed description here</p>
</div>
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 2 -->
</div>
JQuery:
(function($) {
$(".project-nav a").click(function() {
var target = '.div' + $(this).attr("data-id");
$(".project-desc >div").css("opacity", "0");
$(target).css("opacity", "1");
});
})(jQuery);
All together: JsFiddle
Here's my take:
$(function() {
$(".project").each(function() {
let $project = $(this);
$project.find("nav a").click(function() {
$project.find(".project-info > p").hide();
$project.find("." + $(this).attr("href")).show();
return false;
});
});
});
.project {
padding: 0.5em;
border: 1px solid black;
margin: 1em 0;
}
.project-image {
display: block
}
.details {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1 -->
<div class="project">
<img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
<div class="project-info">
<h3>First Project Title</h3>
<p class="overview">First project overview here</p>
<p class="details">More detailed description here</p>
<nav>
Overview
Details
</nav>
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project">
<img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
<div class="project-info">
<h3>Second Project Title</h3>
<p class="overview">Second project overview here</p>
<p class="details">More detailed description here</p>
<nav>
Overview
Details
</nav>
</div>
</div>
<!-- End of project 2 -->
</div>
I focused on slimming down the HTML and making the nav functionality flexible so you can arbitrarily add projects and nav links without worrying about existing ones.
as #j08691 said, simply replace opacity:0 with display: none and opacity: 1; with display: block; see modified JSFiddle
I have also solved it but I think It can be easier done. Then what I did. But why go easy if you can do it on a hard way without CSS.
I have deleted some div in the HTML.
What I did is good exercise for JQuery
var showTheRightStuffAtTheRightPlace = function(){
var $selector = $(this);
var whatProject = $selector.attr("data-id");
var whatDoINeedToShow = $selector.html();
var String;
switch(whatDoINeedToShow){
case 'Overview':
String = '<p>First project overview here</p>'
break;
case 'Details':
String = '<p>More detailed description here</p>';
break;
}
$('.' + whatProject).html(String);
};
var init = function () {
$(".project-nav").on('click','a',showTheRightStuffAtTheRightPlace);
};
$(document).ready(init());
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="projects">
<h2>Projects</h2>
<!-- Start project 1-->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>First Project Title</h3>
<div class="project-desc project1">
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 1 -->
<!-- Start project 2 -->
<div class="project-image">
<img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
</div>
<div class="project-info">
<h3>Second Project Title</h3>
<div class="project-desc project2">
</div>
<div class="project-nav">
Overview
Details
</div>
</div>
<!-- End of project 2 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="fullpage">
<section class="vertical-scrolling" id="section1">
</section>
<section class="vertical-scrolling" id="section2">
</section>
<section class="vertical-scrolling" id="section3">
</section>
<section class="vertical-scrolling" id="section4">
</section>
<section class="vertical-scrolling" id="section5">
</section>
<footer>t
my footer content goes here
</footer>
</div>
Hello I am using full-page.js template. I want to implement footer into that but when I take footer into my <section> it creates a full page but my footer size is not full page. I want to make my footer to reveal when I scroll down to the last section. I havent added cdn of fullpage.js
make footer position as absolute and bottom as 0px.
try this jsfiddle Example
I am trying to get the next Section Project Title .section .project-title and echo it out.
My markup has been stripped back for ease of reading here but it is there in structure. I am able to grab the section project title under the .section.active div but not sure on how to grab the next project title?
Please note that the .active class changes when the user scrolls down the page to each section, so I also need it to be dynamic.
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div> <!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div> <!-- .section -->
</div> <!-- #fullpage -->
I did try something along these lines with no luck:
var indexNext = jQuery('.section.active').parent().siblings().find('project-title').html();
You could get the current active section:
var currentSection = jQuery('.section.active');
Get the next section:
var nextSection = $(currentSection).next();
Find its project title:
var projectTitle = $(nextSection).find(".project-title");
And print it out:
console.log(projectTitle.html());
Obviously you could put all in one line:
var nextTitle = jQuery('.section.active').next().find(".project-title").html();
See following complete example, please:
var currentSection = jQuery('.section.active');
var nextSection = $(currentSection).next();
var projectTitle = $(nextSection).find(".project-title");
console.log(projectTitle.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->
I hope it helps you, bye.
You can use:
$('.section.active + .section .project-title').text();
I've used a CSS selector to select the .project-title element of immediate next sibling. As it is a pure CSS selector so it is more efficient than jQuery's .next() method.
You can check the existence of next section if you want. All you need to do is to add a check like this:
if($('.section.active + .section').length) {
$('.section.active + .section .project-title').text();
}
Working Demo:
alert($('.section.active + .section .project-title').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section active">
<div>
<h1 class="project-title post-title">Section Title One</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Two</h1>
</div>
</div><!-- .section -->
<div class="section">
<div>
<h1 class="project-title post-title">Section Title Three</h1>
</div>
</div><!-- .section -->
</div><!-- #fullpage -->
You can use next method
$('.section.active').next().find('h1').text();
Working demo : https://jsfiddle.net/gaq23jbL/4/
I try to use this on my web app http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/comment-page-1/#comments it works fine, but now what I need is to load a new page and select the fine tab.
So instead of this dynamic stuff:
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-topline-1"><p>1</p></section>
<section id="section-topline-2"><p>2</p></section>
<section id="section-topline-3"><p>3</p></section>
<section id="section-topline-4"><p>4</p></section>
<section id="section-topline-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
I'd like to have
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<div layout:fragment="content">
</div>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
</section>
I want this to reload my page and select the tab I clicked. I think it's not a big deal to do but I'm not verry powerful in web stuff.
Thank's