Can't get tabs to work in HTML & JavaScript - javascript

I'm not a JavaScript person so I'm having a little difficulty with what I'm trying to do. We have a html page that is supposed to display "tabs" for 3 different details of our product: Description, Details, and Returns. I can get the tabs to display correctly but the JavaScript isn't changing to the tab when I click on the tab header.
Here's my html, pretty basic:
<html>
<head>
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<br><br><br>
<ul class="sans tabs">
<li>
<a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
</li>
<li>
Details
</li>
<li>
Delivery & Returns
</li>
</ul>
<ul class="tabs-content">
<li class="active" id="tabinfo">
<p>A description of the product would go here. A description of the product would go here. A description of the product would go here.
A description of the product would go here. A description of the product would go here. A description of the product would go here. A description of the product would go here.</p>
</li>
<li id="tabdetails">
<ul>
<li>Detail #1</li>
<li>Detail #2</li>
<li>Detail #3</li>
<li>Detail #4</li>
<li>Detail #5</li>
<li>etc.</li>
</ul>
</li>
<li id="returns">
<p>Details about returning a product would go here.</p>
<p>Details about returning a product would go here.</p>
<p>See Delivery & Returns for more information.</p>
</li>
</ul>
<script src="tabs.js"></script>
</body>
</html>
and of course, the tabs.js file:
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
Again, I don't know a whole lot about js so I'm sure it's something to do with that but right now I'm stuck and can't figure it out.

You need to wrap your statement in a ready statement.. i.e
$(document).ready(function(e) {
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
This could be neatened up as well:
$('body').on('click', 'ul.tabs > li > a', function(e) {
could become
$('.tabs').on('click', 'a', function(e) {

Try using this jquery ui tabs. you will find all the code you need and an explanation on how to apply it in the link provided

You need to add the Click handler on the Tab headers, instead of on the body
$("body ul.tabs li").click(function() {
// the function goes here.
});
This is assuming that you're using jQuery. If you're not already using it, you should add this under the head section.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

Related

How to make the scrolling link in main menu to be active on click only?

I'm building a website by wordpress using "The7" theme.
in the main menu i have three anchor links that links to sections in the homepage, i have a problem these links have "active" class ((i think it's because of the theme))
Here is an image of the problem
I need these links to be active on click only
i tried to insert a js script to the header to avoid these links having "active" class
$(function() {
var $navLIs = $('header.header-bar ul li a')
$navLIs.click(function() {
$navLIs.removeClass('active');
$(this).addClass('active');
});
});
I'm assuming you are inserting the script after the header (html content) has loaded.
If so, you can try something like this:
<html>
<head>
<!-- styles, meta tags, title, etc -->
<head>
<body>
<header class='header'>
<ul>
<li>
<a class='active item-one'>item one</a>
</li>
<li>
<a class='active item-one'>item one</a>
</li>
<li>
<a class='active item-one'>item one</a>
</li>
</ul>
</header>
<!-- rest of your html -->
<script>
(function() {
function removeActiveClassFromMenuItems() {
const activeItems = document.querySelectorAll('.active');
activeItems.forEach(item => {
item.classList.remove('active');
});
}
removeActiveClassFromMenuItems(); //Removes active class
})();
</script>
</body>
</html>

switch between colors in jquery

i have a problem
first this is my code
$('.boxColor ul li').click(function () {
$("link[href*='default']").attr('href', $(this).attr("data-color"));
});
<section class="boxColor">
<i class="fa fa-cog" aria-hidden="true"></i>
<ul>
<li data-color='css/color/alizarin.css'></li>
<li data-color='css/color/amethyst.css'></li>
<li data-color='css/color/concrete.css'></li>
<li data-color='css/color/nephritis.css'></li>
<li data-color='css/color/orange.css'></li>
<li data-color='css/color/piteRiver.css'></li>
<li data-color='css/color/pumpkin.css'></li>
<li data-color='css/color/wetAsphalt.css'></li>
<li data-color='css/color/default_style.css'></li>
</ul>
</section>
the problem is when i click in the li to change the color,
the color changes just on the first click and when i click at another color is not work
the button of switch work just one time
The question doesn't include the <link> element in the HTML, but this is probably because after the first change, link[href*='default'] will no longer select any elements because the new href doesn't contain the string default.
I recommend giving the link element in question an ID so that it remains the same all the time:
HTML
<link rel='stylesheet' type='text/css' href='css/color/default_style.css' id='color_stylesheet'>
<!-- other stuff follows -->
JavaScript
$('.boxColor ul li').click(function () {
$('#color_stylesheet').prop('href', $(this).attr('data-color'));
});

JQuery each function toggle class

So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

Categories

Resources