When I click on the tab it then displays the content that is associate. I'm using # to do it. Here is what I have tried, but I don't know how to do the switching part, Can someone help please?
So when click tab1 to show tab1 content, and click tab2 to show tab2 content and so on.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
Edit, I prefer not to use jQuery UI or any plugins.
You're very close here, just a couple things:
1) I would suggest applying the "active" class to the parent <li> so your highlighting will be simpler to get at
2) Use the href of the clicked link to switch out the content, and I would use a class to hide/show content, however I will provide jQuery following your example of using the show() and hide() method. Either approach would work.
The final jQuery would be something like this:
$(document).ready(function() {
$('.tab-content').slice(1).hide();
$('.tab-menu li').eq(0).addClass('active');
$('.tab-menu li a').click(function(e) {
e.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});
It's working in a fiddle for reference: http://jsfiddle.net/yscbeaxh/
It's really hard to get tabs right. Your current code isn't too bad, but you will face hiccups eventually. I can't say what OTTOMH, but, you will ;).
For your current code, you need to take the href attribute from the click li, select the matching p (based on ID - it's handy that the href attr returns #tab-1, you can use that as your selector!), and show it. You'll also want to hide the other 'active' tabs, and remove the class from any 'active' li's too.
This code should do the trick.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$('.tab-menu li a.active').removeClass('active');
var tabDivId = $(this).attr('href');
$(this).addClass('active').siblings().removeClass('active');
$('p.tab-content').hide();
$(tabDivId).show();
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
The solution is very simple.
First I gave all the tabs a display of none and the active class display:block;
Than with jquery I take the href value of the <a> you clicked and than use that as the selector to add class active to the right tab.
demo
html:
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs">
<p id="tab-1" class="tab-content active">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
</div>
css:
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
.tabs{
width:50%;
}
.tabs > p{
display:none;
}
.tabs .active{
display:block;
}
Jquery:
$(document).ready(function () {
$('.tab-menu li a').click(function () {
$('.tab-menu li a').removeClass('active');
$(this).addClass('active');
tab = $(this).attr('href');
$('.tabs .active').removeClass('active');
$(tab).addClass('active');
});
});
Related
Hi I'm accustomed to writing code in jQuery, and wanting to learn to write in plain Javascript instead. I've got this example to show and hide some tabs using jQuery which is working correctly, but how would this be written differently in Javascript?
I'm trying to compare how differently they're written so i can get a better understanding of it. Any help/tips on how this would be done would be greatly appreciated.
setTimeout(function() {
$('.tabContainer a').click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var activeTab = $(this).attr("href");
$('.tabContent').not(activeTab).css("display","none");
$(activeTab).fadeIn();
});
},1000);
.tabContent {display: none;}
#tab1 {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>
You can try the following way except the fadeIn:
setTimeout(function() {
//get all a elements and loop through them
document.querySelectorAll('.tabContainer a').forEach(function(el){
//attach click event to the current element
el.addEventListener('click', function(event) {
event.preventDefault();
//remove the class current from all
this.closest('.tabContainer')
.querySelector('.current')
.classList.remove("current");
//add the class current to the current element's closest li
this.closest('li').classList.add("current");
//set display style none to all
document.querySelectorAll('.tabContent').forEach(function(a){
a.style.display = "none";
});
var activeTab = this.getAttribute("href");
//set display style block to the mached element
document.querySelector(activeTab).style.display = "block";
});
});
}, 1000);
.tabContent {display: none;}
#tab1 {display: block;}
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>
I am trying to toggle between font-awesome elements .
I want to remove the font-awesome element when a new a tag is clicked. The font-awesome element should be visible only for the current clicked a tag.
[FIDDLE][1]
My JS CODE.
$(document).ready(function() {
$('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$('.nav ul li a').click(function(event) {
event.preventDefault();
$(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
});
});
$(document).ready(function() {
var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
$('.nav ul li:first').append(fontAwesome);
$('.nav ul li a').on('click', function(event) {
event.preventDefault();
$('.nav ul li a i.fa.fa-chevron-right').remove();
$(this).append(fontAwesome);
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
</ul>
</div>
I know that you have accepted an answer, but you don't need all that logic - all you have to do is set an active class on the currently selected li - and using CSS add the FA icon to that element. Then clicking each li will remove the active class from the list and then apply it to the selected l=i - and the icon will magically move. Note that I have not applied an event.preventDefault(); to the click of a's - I presume that they should in fact navigate to the element you want - since they are in a nav list.
The benefit of setting the active class to the li - is that you can then style it as you want - as well as adding the icon to it.
$(document).ready(function() {
$('nav ul li').click(function(){
$('nav ul li').removeClass('active');
$(this).addClass('active');
})
});
nav ul li.active:after {
font-family: FontAwesome;
content: "\f054";
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
Here is some code and a question: how to enable toggle effect after clicking again on menu link button with saving existing functionality? So I need to hide content on second click (secondary click on link one hides content 1, etc.) All other staff is working perfect, but I have something broken in my jQuery. Also, maybe I have too many non-useful lines of code here. Please correct me if you can.
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
Content 1
</div>
<div class="menu is-hidden" id="link_2">
Content 2
</div>
<div class="menu is-hidden" id="link_3">
Content 3
</div>
<div class="menu is-hidden" id="link_4">
Content 4
</div>
<div class="menu is-hidden" id="link_5">
Content 5
</div>
<div class="menu is-hidden" id="link_6">
Content 6
</div>
Here is a pen containing the code for this example.
What you really want is, just hide other divs except the selected one, when you click on the respective link and again hide it with second click.
Well It doesn't need that kind of messy javascript code
$(function(){
$('.clicker').click(function(e){
$('.menu').hide();
$('#link_'+$(this).attr('target')).toggle();
});
});
.menu{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu" id="link_1">
Content 1
</div>
<div class="menu" id="link_2">
Content 2
</div>
<div class="menu" id="link_3">
Content 3
</div>
<div class="menu" id="link_4">
Content 4
</div>
<div class="menu" id="link_5">
Content 5
</div>
<div class="menu" id="link_6">
Content 6
</div>
.
I think this must be a complete solution for your problem.
It seems that your onClick function on anchors are not working exactly as you had in mind. Here's what I'm going to do:
First, let's get rid of other functions, mouseup and menu click. You can elaborate on those matters later.
For the problem at hand, your anchor click function, just toggle the divs. You can select which div to show/hide by using the hrefs.
Just remove the dash from the href and sent it to jQuery selector. Then you can toggle it. I seperated the code into multiple lines for the sake of understanding.
Hope this helps.
anchor.click(function() {
var href = $(this).attr("href").replace('#', '');
var div = $('#' + href);
$('div.menu').not(div).hide();
$(div).toggle();
});
Here's a pen
The solution finds me. Only JS below:
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
$(this).parent().siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
// close menu when clicking inside of it
$('body').click(function(e) {
var el = e.target || e.srcElement;
// if the target of the click isn't the other menu nor navigation link
if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
I have this sample:
link
CODE HTML:
<div class="menu">
<ul>
<li>Link1
<li>Link2
<ul>
<li>Home Link 1 Link 1</li>
<li>Home Link 1 Link 2</li>
<li>Home Link 1 Link 3</li>
</ul>
</li>
</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CODE CSS:
ul{
list-style-type:none;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.active{
border-left:2px solid red;
}
CODE JS:
$('.menu li ').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
My problem is following
If a user click for example on the element 4 and page reload,element 4 not have border-left
In the above example this works because everything is dinamic..dar imagine what would happen when opening a new HTML page...then the menu item that was clicked not have border-left.
How can I solve this problem?
Thanks in advance!
You cant show a menu bar or infact anything if the whole page is getting reloaded. But you can use AJAX calls for it. It will reload or update only a part of the page so that the menu remains as it is.
i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here
is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>