I have simple tabs on "single-page.html"...
<div class="tabs">
<div class="tab-opt">
<ul>
<li class="active">Impressum</li>
<li>Datenschutz</li>
<li>AGB</li>
<li>Credits</li>
</ul>
</div>
<div class="tabs-content">
<div id="impressum" class="tab" style="display: block;">
...
</div>
<div id="datenschutz" class="tab">
...
</div>
<div id="agb" class="tab">
...
</div>
<div id="credits" class="tab">
...
</div>
</div>
</div>
$(function () {
$(".content-tabs .tab-opt ul li a").on('click', function (e) {
$(".content-tabs .tab-opt ul li").removeClass('active');
$(this).parent().addClass('active');
$(".content-tabs .tabs-content > div").hide();
var hrefId = $(this).attr('href');
$(hrefId).fadeIn().show();
});
});
I want to put links in footer and be able to show some tab on "single-page.html" from any page.
Example:
On homepage, with link in footer:
AGB
I want to open "single-page.html" and show "AGB" tab...
Related
I've been trying to get my divs to display per click - which works..... However, I want Div1 to be shown - but Div2 and Div3 hidden until clicked and when clicked, the current visible div should be hidden.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
I've managed to get the following:
Show all on load and show none until a click is registered. But onlick seems to not work when I add in the classes:
Show (display:block;)
hide (display:none;)
What could be causing this?
I would like for tab1 to show on page load, but tab 2 and tab 3 only show when clicked..... But that also hides the current active div.
Is there another method to onclick?
Just specify the first tab in your css. JQuery will add it's own CSS which will have a higher specificity on click.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display: none;
}
.platform.tab1 { /* <-- I added this */
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Instead of using .hide() and .show() you could use a show class. Include this in the class of the first tab, then change it in the click handler.
$(function() {
$("#tabs li a").click(function() {
$(".platform.show").removeClass("show");
var myDiv = $(this).attr("href");
$(myDiv).addClass("show");
});
});
.platform {
display: none;
}
.platform.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1 show" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Is there any way to make hovering over a navigation anchor link act similarly to a href action, where hovering the link for an 'About' link (like in my site below) displays goes directly to the 'About' section of the page, and then moving the mouse away from the link goes back to the original div if the 'About' link is not clicked on?
Codepen: http://codepen.io/anon/pen/zZdzmB.
HTML:
<nav>
<ul id="menu">
<li>
<a>Menu</a>
<div id="dropdown">
<ul>
<li class="navLink active"><div class="navLine"></div>Home</li>
<li class="navLink"><div class="navLine"></div>About</li>
<li class="navLink"><div class="navLine"></div>Skills</li>
<li class="navLink"><div class="navLine"></div>Work</li>
<li class="navLink"><div class="navLine"></div>Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
<main>
<section id="homeSection" class="section" data-anchor="home">
<div class="sectionContent">
<h1 id="intro">Intro text</h1>
</div>
</section>
<section id="aboutSection" class="section" data-anchor="about">
<div class="sectionContent">
</div>
</section>
<section id="skillsSection" class="section" data-anchor="skills">
<div class="sectionContent">
</div>
</section>
<section id="workSection" class="section" data-anchor="work">
<div class="sectionContent">
</div>
</section>
<section id="contactSection" class="section" data-anchor="contact">
<div class="sectionContent">
</div>
</section>
</main>
you could use jQuery
$('.navLink').hover(function(){
$(this).trigger('click');
});
You can just use the .mouseover() function.
I updated your CodePen with these change: http://codepen.io/anon/pen/vxJWVp
Here's the Jquery Mouseover function:
$( document ).ready(function() {
$('#1').mouseover();
});
$('#1').mouseover(function() {
$('#intro').html('Intro');
});
$('#2').mouseover(function() {
$('#intro').html('About Content goes here');
});
$('#3').mouseover(function() {
$('#intro').html('Skills Content goes here');
});
$('#4').mouseover(function() {
$('#intro').html('Work Content goes here');
});
$('#5').mouseover(function() {
$('#intro').html('Contact Content goes here');
});
Then just add the respective ' id = "1" '
<li class="navLink active" id="1"><a href="#homeSection">
<div class="navLine"></div>Home</a></li>
I've a problem with the following code. I've two tabs in my navigation Tab-1 & Tab-2, when the user click on any tab, then I want to add the active class to it and at the same time I want to remove the active class from previously active tab. Also the tab which is currently active should display its content and have to hide the remaining content. It means when the user clicked on any tab it should display only its content and the other contents should be hidden. Please help me thank you.
<style>
.wrapper .tabs {
display: none;
}
.wrapper .tabs.active {
display: block;
}
</style>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li class="active">Tab-1</li>
<li>Tab-2</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>
<!-- Script -->
<script>
$(document).ready(function () {
$('.nav li').click(function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
// To display content for active class only
$('.nav li').click(function() {
$('.wrapper .tabs.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
You can use .eq(), .index() at click event attached to selector "a[href^='#tab-']" which selects element where href begins with #tab-, create variable referencing elements where id begins with tab-, call event.preventDefault() within click function to prevent navigation to document fragment, .hide(), .show()
$(document).ready(function() {
var a = $("a[href^='#tab-']");
var tabs = $("[id^=tab]");
a.click(function(e) {
e.preventDefault();
tabs.hide().eq(a.index(this)).show()
})
})
#tab-1 {
display: block;
}
[id^="tab"]:not(#tab-1) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li>
Tab-1
</li>
<li>
Tab-2
</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>
How do I add a class to an <li> element when it is clicked?
I have the following code:
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)" class="mbutton">Cheerful</li>
<li id="tabs2" onclick="showStuff(this)" class="mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent" style="display: block;">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent" style="display: block;">
<h4>Content 2</h4>
</div>
When the user clicks on the first <li> then content 1 is shown and the same will happen for the 2nd <li> with the 2nd content.
Here is my JS:
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
$('ul#moodtabs li').click(function() {
$('ul li.current').removeClass('current');
$(this).closest('li').addClass('current');
});
I'm trying to add a class active to the <li> tags so I can style them when they are active.
Your code already works (could be though better written)
But most probably you're missign to wrap your jQuery code in DOM ready:
jQuery(function( $ ){ // DOM ready
$('.tabs').each(function() {
var $tab = $(this).find(".tab");
$tab.on("click", function() {
var tabId = this.id.replace(/\D/g,'');
$tab.not(this).removeClass('current');
$(this).addClass('current');
$(".tabContent").removeClass("current");
$("#tabs-"+tabId).addClass("current");
});
});
});
.mbutton {background:none;}
.mbutton.current{background:red;}
.tabContent {display:none;}
.tabContent.current{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" class="tab mbutton">Cheerful</li>
<li id="tabs2" class="tab mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent">
<h4>Content 222222</h4>
</div>
I think the simplest binding would be
$('ul#moodtabs li').click(function() {
$(this).addClass('current').siblings('li').removeClass('current');
});
You can also drop your javascript function entirely and have this be your full function
$('ul#moodtabs li').click(function() {
var myTab = $(this).index();
$(this).addClass('current').siblings('li').removeClass('current');
$('.tabContent').eq(myTab).css('display','block').siblings('.tabContent').css('display','none');
});
I want to show the div of selected HTML link.
For example:
I clicked on the html link Categories the <div id="categories" ... > will be showed and the other div's will hide.
HTML
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
Try this:-
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').hide();
$('#' + $.trim($(this).text()).toLowerCase()).show();
});
Fiddle
OR
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show()
.not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
Fiddle
$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
use the above code to make it work.
Working Fiddle : https://jsfiddle.net/z4bprass/1/
You can use css :target, general siblings selector ~
:target {
display: block !important;
}
:target ~ div[id] {
display: none;
}
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
<div id="quizzes">//default showed Quizzes!
</div>
</div>