How to highlight the selected tab?

How to highlight the selected tab? - javascript

I have a set of tabs in html which I want to highlight when selected. I am trying to use jquery to do this. But it does not seem to work.
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>

That is doable with a on click event:
$(document).on("click", 'ul li', function(){
$('ul li').removeClass('active');
$(this).addClass('active');
});
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>

Add an operator class which defines which tab is active/clicked.
HTML
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>
Style it in CSS then do a click event in your Javascript/jQuery that looks like follows:
$(document).ready(function(){
$(".nav").on("click", "li", function(){
$(".active").removeClass("active");
$(this).addClass("active");
})
})
http://jsfiddle.net/scriptonic/pgw8qq9a/3/

This is all the jQuery/javascript you need:
$('.nav a').click(function() { // Hook up to the click event on your .nav anchors
$('.nav li').removeClass('active'); // Clear any existing active <li>'s
$(this).parent().addClass('active'); // Apply the active class to the <li> parent of the clicked <a>
});

This is pretty much the same as another (just some guy, I would have just added a comment, but I have no reputation points. Negative in fact), but a little more specific to the .nav class, so you're not adding events to all ul li elements, but only to the ones under your .nav class.
You could also do with with on, if your tabs are anything more than static...
$(".nav li a").click(function() {
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
http://jsfiddle.net/pgw8qq9a/9/

$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>

html:
<ul class="nav">
<li><a onclick="add_select(this);" href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab4">tab4</a>
</li>
</ul>
jquery:
function add_select(selected_nav){
$("ul#nav li a").removeClass("active");
$(selected_nav).addClass("active");
}

Related

Debug the following code

I want to make multilevel responsive drop down menu. the problem is that on clicking on Purchase, Sale and New menu the drop down menus are appearing but they remain open on again click. i want to show/ hide it on click like the #handle. it means that when i click to Purchase menu the relevant drop-down list should be appearing, on again click it must be shown off. The same requirements are with Sale and New menus.
the code are below,
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available Stock</li>
<li>
Purchase
<ul class="sub-menu">
<li class="sub-list">Purchase Return</li>
</ul>
<li>
Sale
<ul class="sub-menu">
<li class="sub-list">Sale Return</li>
</ul>
</li>
<li>Cash Recieve</li>
<li>Cash Payment</li>
<li>Cash Recieve</li>
<li>
New
<ul class="sub-menu">
<li class="sub-list">New Customer</li>
<li class="sub-list">New Supplier</li>
<li class="sub-list">New Town</li>
<li class="sub-list">New Product</li>
</ul>
</li>
<li>Opening Stock</li>
<li>Gate Pass</li>
<li>Sale History</li>
</ul>
</nav>
</div>
javascript:
<script>
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('ul#nav li').on('click', function() {
$('.sub-menu').toggleClass('sub-menu');
});
</script>
css:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
}
.clear {
clear:both;
}
ul {
list-style-type:none;
margin:0;
padding:0;
-moz-transition:max-height 0.4s;
}
ul#nav li {
background:#fff;
float:left;
}
ul#nav li a {
color:black;
display:block;
background:#fff;
padding:10px;
text-decoration:none;
border-bottom:1px solid green;
}
ul#nav li a:hover {
background:#000;
color:white;
}
ul#nav li .sub-list {
float:none;
}
.sub-menu {
display:none;
}
ul#nav li:hover .sub-menu {
display:block;
position:absolute;
}
#handle {
display:none;
}
#media screen and (max-width:480px) {
ul#nav li {
width:100%;
text-align:center;
}
ul {
max-height:0;
overflow:hidden;
}
.showing {
max-height:50em;
}
ul#nav li .sub-menu {
max-height:0;
}
.sub-menu {
max-height:2em;
}
#handle {
display:block;
background:#093;
color:#fff;
padding:10px;
text-align:center;
font-weight:bold;
cursor:pointer;
}
}

Try this
$('ul#nav a').on('click',function(e){
$(this).next('ul').toggleClass('sub-menu');
});
When you click on a link, ul tag that is next sibling of clicked link is shown.

Need a active submenu after refresh (jquery accordion menu)

I had created a menu with jquery, the issue is when i click on a submenu; site refreshes and then the menu doesn't remain active state, I want it to show active its menu and submenu when clicked..
also created a fiddle http://jsfiddle.net/akshaydesai/ptghs8xo/
<ul class="menu">
<li><div>PRODUCTS</div>
<ul>
<li>Scada Software</li>
<li>Energy Monitoring</li>
<li>Tension Monitoring</li>
<li>Protocol Gateways</li>
<li>Gas Monitoring</li>
<li>Led Display</li>
</ul>
</li>
<li><div>SOLUTIONS</div>
<ul>
<li>Power & energy</li>
<li>Process Automation</li>
<li>Medical Diagnostics</li>
<li>Machine Tools</li>
<li>Remote Monitoring</li>
<li>Industries</li>
</ul>
</li>
<li><div>OUR EXPERTISE</div></li>
<li><div>ABOUT US</div></li>
<li><div>CONTACT US</div></li>
</ul>
.menu ul{
text-align:justify;
width:300px;
min-width:500px;
margin-top:60px;
}
.menu ul:after{
content:'';
display:inline-block;
width:100%;
}
.menu ul li{
display:inline-block;
list-style:none;
white-space:nowrap;
margin:0;
padding:0;
}
.menu ul li a{
text-decoration:none;
color:#000;
}
.menu ul li:hover a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu ul li:hover ul li a{
color:#000;
border:none;
margin-right:25px;
}
.menu ul li:hover ul li:hover a{
color:#CCCC00;
}
.menu li.active a{
color:#CCCC00;
border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
position:absolute;
display:block;
text-align:justify;
width:500px;
min-width:500px;
margin:0;
padding-top:20px;
}
.menu li.active ul li a{
color:#000;
margin-right:25px;
border-bottom:none;
}
.menu li.active ul li:hover a{
color:#CCCC00;
margin-right:25px;
}
.hide{
display:none;
}
$(document).ready(function(){
$(".menu > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('.menu ul').slideUp(700);
}
$(this).next().slideToggle(700);
});
var url = window.location.href;
var $current = $('.menu li ul a[href="' + url + '"]');
$current.parents('.menu ul').slideToggle();
$current.next('.menu ul').slideToggle();
});

Use separate URLs in href, corresponding to each page. So, when the page is refreshed, URL will be changed and menu on the page will exactly know which page is currently opened and which menu must be visible.

EDIT
There is nothing wrong with your code, assuming that you have set the correct hrefs, like:
<li>Scada Software</li> // I'm using a localhost example here just to simplify.
This works. If not, check the url:
Add directly after var url = window.location.href;
this: console.log('url:' + url);
or this: alert('url:' + url);
and the current url will be outputted.
You can also use cookies (or another way to store a persistent variable) to recall the active state after refreshing the page.
Here's an example of using cookies with jQuery: How to set/unset cookie with jQuery?

Responsive drop downs not activating until resize

So I have tried to setup a responsive menu using the code here
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html
The problem I'm having is that the js seems to only activate when I resize the browser otherwise the larger version does not show the sub menu li when hovering and the smaller version has the li showing without clicking them first.
JS
var ww = '100%';
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
HTML
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals</li>
<li>Sneakers</li>
<li>Wedges</li>
<li>Heels</li>
<li>Loafers</li>
<li>Flats</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Loafers</li>
<li>Sneakers</li>
<li>Formal</li>
</ul>
</li>
</ul>
</li>
<li>
Shirts
<ul>
<li>
Mens
<ul>
<li>T-Shirts</li>
<li>Dress Shirts</li>
<li>Tank Tops</li>
</ul>
</li>
<li>
Womens
<ul>
<li>T-Shirts</li>
<li>Blouses</li>
<li>Dress Shirts</li>
<li>Tunics</li>
<li>Camisoles</li>
</ul>
</li>
</ul>
</li>
<li>
Pants
<ul>
<li>
Mens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
<li>Leggings</li>
</ul>
</li>
</ul>
</li>
<li>
Skirts
<ul>
<li>
Long
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Short
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Mini
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
</ul>
</li>
<li>
Dresses
<ul>
<li>
Casual
</li>
<li>
Formal
<ul>
<li>Wedding</li>
<li>Party</li>
</ul>
</li>
</ul>
</li>
<li>
Sweaters
<ul>
<li>
Mens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
</ul>
</li>
<li>
Accessories
<ul>
<li>
Womens
<ul>
<li>Belts</li>
<li>Bags</li>
<li>Jewelery</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Belts</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
</ul>
</li>
<li>
Outerwear
<ul>
<li>
Womens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>

The initial value of ww is '100%', which is a string.
On $(document).ready you call the adjustMenu() method, which reads the value of ww.
Both conditions (ww < 768 and ww >= 768) evaluate to false, so adjustMenu() does nothing on DOMready.
You can avoid this to call $(window).trigger('resize') instead of calling adjustMenu() in your $(document).ready(function() { ... } method so that ww has a numeric value:
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
$(window).trigger('resize');
});

How to Change CSS style of the same element that is NOT Hovered

HTML
<ul id="menu">
<li>Home</li>
<li>Categories
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS
#menu li{
width:80px;
}
#menu li:hover {
width:200px;
}
I want to set the width of OTHER <li>s THAT ARE NOT HOVERED to 60PX while one of them are Hovered, and then set width back to 80PX when all of them are not hovered.. how Would I do that?

Using jQuery
jQuery(function ($) {
$('#menu li').hover(function () {
$(this).width(200).siblings().width(60)
}, function () {
$(this).siblings().addBack().width(80)
})
})
Demo: Fiddle

I want to set the width of OTHER <li>s THAT ARE NOT HOVERED to 60PX while one of them are Hovered, and then set width back to 80PX when all of them are not hovered
With jquery you can do like this:
$('#menu li').hover(function(){
$('#menu li').css('width','60px');
$(this).css('width','80px');
},function(){
$('#menu li').css('width','80px');
});
demo

To select li elements that are not :hovered, consider trying:
#menu li{
width:80px;
color: green;
}
#menu:hover li{
color: yellow;
}
#menu li:hover {
width:200px;
color: red;
}

You can achieve that by simply using :hover on both li and ul.
ul li{
width:80px;
}
ul:hover li{
width: 60px;
}
#menu li:hover {
width:200px;
}

Add 2nd sub nav to accordion style menu

I'm looking to have an additional subnav to this accordion menu. I tried to add a child element to the nav ul li, but that didn't seem to work. Ideally, I would like to be able to list web projects under "web" and print under "print".
FIDDLE: http://jsfiddle.net/schermerb/rGMAu/1/
.header button {
cursor:pointer;
float:right;
padding:5px;
margin:10px 10px;
border:none;
border:1px solid #ececec;
background:#444;
color:#ececec;
}
.nav {
text-align:center;
background:#444;
}
.nav ul li {
text-transform:capitalize;
display:block;
border-bottom:1px solid #ececec;
}
.nav a {
display:block;
padding:10px;
color:#ececec;
}
.nav a:hover {
background:#029b9d;
color:#ececec;
}
<button id="show">Menu <span>+</span> <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Web
</li>
<li>Print
</li>
</ul>
</div>

I have updated your js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
Updated jsFiddle File

Adding a child element was the right path.
http://jsfiddle.net/jonigiuro/rGMAu/2/
<li>Web
<ul class="sub">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</li>
You hide the child element by default, and when you hover on the parent, you show the it:
ul li:hover ul
Here's the revelant css for your case:
.nav ul li ul {
color: red;
margin: 0;
padding: 0;
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li ul li {
padding: 10px 0;
}

Develop Reference

JavaScript is the programming language of the Web.

How to highlight the selected tab? - javascript

Related

Debug the following code

Need a active submenu after refresh (jquery accordion menu)

Responsive drop downs not activating until resize

How to Change CSS style of the same element that is NOT Hovered

Add 2nd sub nav to accordion style menu

Categories

Resources