jQuery adding and removing classes dynamically when the user clicked - javascript

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>

Related

Jquery only showing on click - not on load and click

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>

How to show tab with external link from other pages?

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...

How to show one div at a time with least lines of code?

I am trying to show only one div at a time once a link is clicked. My codepen I was working on is here if someone could take a look. I'm trying to use jQuery so that when an element inside a list item is clicked it toggles that div item to display ONLY until another item is clicked which hides the previous item.
$( "#home_div" ).hide();
$( "#about_div" ).hide();
$( "#home" ).click(function() {
$('#home_div').toggle();
});
$( "#about" ).click(function() {
$('#about_div').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li id="home">Home</li>
<li><a id="about" href="#">About</a></li>
<li><a id ="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div id="home_div"></div>
<div id="about_div"></div>
<div id="portfolio_div"></div>
<div id="contact_div"></div>
</header>
</body>
To make this work in a generic manner (and therefore keep the JS as short as possible) you can place the id of the target content within the href property of the a elements. Then you can simply toggle() the target div whilst hiding its siblings, like this:
$('.main-nav a').click(function(e) {
e.preventDefault();
$($(this).attr('href')).toggle().siblings().hide();
});
#content-container div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="content-container">
<div id="home_div">Home</div>
<div id="about_div">About</div>
<div id="portfolio_div">Portfolio</div>
<div id="contact_div">Contact</div>
</div>
Give all the content a common class. Then use the id of the nav link to create selector for the content to show
$('.main-nav a').click(function(e) {
e.preventDefault();
// hide all content class and filter the matching id to show
$('.content').hide().filter('#' + this.id + '_div').show();
});
.content {
display: none
}
.content:first-of-type {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
<li><a id="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div class="content" id="home_div">home_div</div>
<div class="content" id="about_div">about_div</div>
<div class="content" id="portfolio_div"></div>
<div class="content" id="contact_div">portfolio_div</div>
</header>
</body>
How about zero javascript? You could change the menu to be labels that tie to radio buttons that control which div shows. The CSS only shows the div immediately after the radio button that is currently selected, modifiable by clicking any of the menu labels.
[name=mainNavState] { display: none; }
[name=mainNavState] + div { display: none; }
[name=mainNavState]:checked + div { display: inherit; }
<ul class="main-nav">
<li id="home"><label for="homeState">Home</label></li>
<li><label for="aboutState">About</label></li>
<li><label for="portfolioState">Portfolio</label></li>
<li><label for="contactState">Contact</label></li>
</ul>
<input type="radio" name="mainNavState" id="homeState" checked>
<div id="home_div"> My Home Stuff </div>
<input type="radio" name="mainNavState" id="aboutState">
<div id="about_div"> My About Stuff </div>
<input type="radio" name="mainNavState" id="portfolioState">
<div id="portfolio_div"> My Portfolio Stuff </div>
<input type="radio" name="mainNavState" id="contactState">
<div id="contact_div"> My Contact Stuff </div>

submenu not loading on hover

I have menu and submenu which was created totally as divs instead of ul li. So, on hovering the menu element, I need to target a particular div and show as submenu. I have written a jquery event by passing submenu id as data-target to target the specific div to show as submenu. When I apply break points, the loop is going inside., but unable to remove initial property of submenu (display:none) to (display:block). Here is the plunker link for more details. please let me know where i`m going wrong.
I understand this div approach is not right one. But I have to develop according to existing HTML
$("#mainDiv div").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(liID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
jQuery('#' + menuliID).hover(function(){
console.log("entered inside function");
$('#' + subMenuId).css('display', 'block !important');
console.log('"#' + subMenuId + '"');
},
function () {
console.log("entered inside 2nd function")
jQuery('#' + subMenuId).css('display', 'none');
}
);
}
);
please change
$('#' + subMenuId).css('display', 'block !important');
into
$('#' + subMenuId).show();
as it is not necessary to apply .css() as you can do your work with .show() or .hide()
and please see my working snippet
// Code goes here
$("#mainDiv > .menuli").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(menuliID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
if($('#' + subMenuId).is(":visible")){
$('#' + subMenuId).hide();
}else{
$('#' + subMenuId).show();
}
}
);
/* Styles go here */
#mainDiv div{
border:1px solid;
width:30%;
}
.submenu{
position:absolute;
top:0;
left:24%;
}
.submenu ul li{
border:1px solid;
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="mainDiv">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
</body>
</html>
You can simplify your code to the following. You just need to toggle the display of the sub menus when hover over main menu.
I have attached hover event to submenu so that it is displayed on mouse over.
//Toggle display of submenu when hover on main menu
$("#mainDiv div").hover(function () {
$('#' + $(this).attr('data-target')).toggle();
});
//Display submenu when hover on it
$(".submenu").hover(function(){
$(this).show();
}, function(){
$(this).hide();
})
.submenu {
border: 1px solid transparent;
}
.menuli{
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv" style="display:inline-flex;padding-top:10px;">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>

How to repeat fadeItem function?

I have side bar menu with the list of items, when it opened it shows the list of the menu with the fade effect. My question is how can I repeat the effect every time when I click "opener" by the way the fadein works for the first time only.
Here is my code for the effect...
<body>
<div id="st-container" class="st-container">
<div id="main" >
<div class="st-pusher">
<!-- nav menu start -->
<nav class="st-menu st-effect-8" id="menu-8">
<ul>
<li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li>
<li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li>
<li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li>
<li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li>
<li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div id="main"><!-- extra div for emulating position:fixed of the menu -->
<div id="st-trigger-effects" class="tab_bar_index">
<button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button>
<button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button>
<div id="titlebar">
<img src="img/logo_text.png" alt-"logo">
<span >Library</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /main -->
</div>
<!-- fade effect for the nav menu -->
<script type="text/javascript">
function fadeItem() {
$('ul li:hidden:first').stop().hide().delay(50).fadeIn();
$(".st-menu ul li ") .addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
</script>
</body>
Initially hide all the items on click and than use .each to loop through and apply the delay and fade in effect.
function fadeItem() {
// hide menu items
$('.st-menu ul li')stop().hide();
// go through and set each element to fade in
$('.st-menu ul li:hidden').each(function (index, elem) {
$(elem).delay((index + 1) * 50).fadeIn();
});
$(".st-menu ul li").addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();

Categories

Resources