i have a navigational bar at the side of my website but the problem is that when i change the tab in the navigational bar the active class does not change here is my code
<!DOCTYPE html>
<html>
<body style="background-color:yellow">
<font color="red"><div align="center"><h1>About</h1></div></font>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #875050;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="prodject.htm">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
and here is my java script code
$(".nav li").click(function() {
if ($(".nav li").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
is there any way to fix this
You don't have nav class in HTML
<ul class="nav">
<li><a class="active" href="prodject.htm">Home</a></li>
</ul>
You don't need if, directly use selector with the method.
$(".nav li").click(function() {
$(".nav li.active").removeClass("active");
$(this).addClass("active");
});
OR,
$(".nav li").click(function() {
$(this).siblings(".active").removeClass("active");
$(this).addClass("active");
});
You don't have a nav class in your dom tree. Add to ul element class attribute with nav value:
<ul class="nav"></ul>
make sure you also have the class attribute for those a tags but also maybe you target the a tag and not nav li
$("a").click(function() {
$(this).siblings("active").removeClass("active");
$(this).addClass("active");
});
You do not have added nav class to ul tag use this code <ul class="nav"></ul> and make changes in jquery use below jquery code.
$(".nav li").click(function() {
$(".nav li.active").removeClass("active");
$(this).addClass("active");
});
Related
Problem description:
In my menu when .mouseenter() the menu opens and when .mouseleave() it closes, but if i click a lot , the .mouseleave() event is executed.
This only happened on chrome browser.
I have other .click() events inside my menu, but every click I made, the .mouseleave() event is execute.
$(document).ready(function() {
$("#nav1 li").hover(
function() {
$(this).find('ul').slideDown();
},
function() {
$(this).find('ul').slideUp();
});
});
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
padding: 16px 18px;
display: block;
border-bottom: 2px solid #212121;
}
#nav1 li ul li a {
padding: 10px 0;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul id="nav1">
<li>Hover here and infinite click
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Try click "Hover here and infinite click" to see this problem.
EDIT:
As you guys said, the problem occurs in this example.
Here is a video: Video link
When you click many times the browser has lost the element reference, try this example:
<div id="container">
<ul id="nav1">
<li>Menu Heading 1
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 2
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
<li>Menu Heading 3
<ul>
<li>Stage1</li>
<li>Stage2</li>
<li>Stage3</li>
<li>Stage4</li>
</ul>
</li>
</ul>
<div>
Css
ul,
li,
a {
padding: 0px;
margin: 0px;
}
.show {
display: block !important;
}
#nav1 a {
color: #FFFFFF;
}
#nav1 li ul li a:hover {
background-color: #394963;
}
div ul li ul {
background-color: #4a5b78;
list-style: none
}
#nav1 > li > a {
background-color: #343434;
padding: 16px 18px;
text-decoration: none;
display: block;
border-bottom: 2px solid #212121;
background: linear-gradient(top, #343434, #111111);
}
#nav1 li ul li a {
padding: 10px 0;
padding-left: 30px;
text-decoration: none;
display: block;
}
div {
background-color: #000000;
background-color: #343434;
width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
display: none;
}
JS
$(document).ready(function() {
$("#nav1 li").hover(
function(e) {
let ulMenu = $(this).find('ul');
ulMenu.addClass('show');
//$(this).find('ul').slideDown();
},
function(e) {
if(e.relatedTarget){
let ulMenu = $(this).find('ul');
ulMenu.removeClass('show');
} else {
console.log('fail ');
}
//$(this).find('ul').slideUp();
});
});
Codepen Example Works
You can add a stropPropagation in your click event.
$("#nav1 li").click(
function(e){
e.stopPropagation();
});
maybe the event is getting lost in the process, try to verify it, and if so set the actual element.
see this: https://api.jquery.com/event.relatedTarget/
I'm trying to create a simple navigation bar that fades content in and out when clicked; however, my fadeOut() jQuery call simply doesn't cause my div element to fade while the alert is appearing. If I copy the fadeOut() line and paste it into the console, the element fades. Can anyone see why fadeOut() isn't working? Any help and tips are appreciated!
HTML
<!DOCTYPE html>
<head>
<link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA=screen>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./js/main.js"></script>
</head>
<html>
<body>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li>Resume</li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
</body>
</html>
JS
$(document).ready(function(){
$( "#about-btn" ).click(function() {
$( "#home" ).fadeOut("slow");
alert("clicked");
});
});
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
This is because you're using a click event on an a element. You need to prevent the default event. Change your JS to this:
$(document).ready(function(){
$( "#about-btn" ).click(function(event) {
event.preventDefault(); // the new line
$( "#home" ).fadeOut("slow");
});
});
You need to preventDefault in order to see the output
$(document).ready(function(){
$( "#about-btn" ).click(function(e) {
e.preventDefault();
$( "#home" ).fadeOut("slow");
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li>Resume</li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
hello try this below jquery.Use Prevent default to prevent the button's default action It will also works with alert! if you use before fadeout.If you use after the fadeout will work though but it wont't be much visilable
.. hope it helps
$(document).ready(function(){
$( "#about-btn" ).on('click',function(e) {
e.preventDefault();
alert("clicked");
$( "#home").fadeOut("slow");
});
});
okay so in php tags i have this:
<?php
echo "<ul>";
echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>link1</a></li></ul></li>";
echo "<ul>";
?>
i am trying to make it so it will show the link1 on hover. so i am using jquery and my code for that is:
</style>
<script type="text/javascript"src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
i have no idea what to do to fix this, please help! if you have any suggestions on how to fix the code please leave them down below i would really appreciate it.
here is the whole thing:
<html>
<head>
<title></title>
<style type="text/css">
ul{
margin:0;
padding:0;
list-style: none;
float: right;
}
ul li{
float: left;
width: 150px;
height: 30px;
line-height: 30px;
}
ul li a{
background-color: cyan;
color: white;
text-decoration: none;
}
ul li li {
color:#fff;
display: none;
}
ul li{
text-decoration: none;
color: #fff;
}
.top{
position: static;
right: 0;
top: 0px;
}
</style>
<script type="text/javascript"src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
</script>
</head>
<body>
<?php
echo "<ul>";
echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>hello</a></li></ul></li>";
echo "<ul>";
?>
</body>
</html>
that is named welcome.php
i have another file named index.php where i include that into my php.
hide your li containing the link, then toggle it .
$(document).ready(function() {
$('#lis').hover(function() {
$(this).find('ul>li').fadeToggle(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
<li id='lis'>WELCOME ".$_SESSION['username']."!
<ul>
<li style="display:none;"><a href='#'>link1</a>
</li>
</ul>
</li>
</ul>
Add a class that hides the link on render.
Then target the a and toggle that.
In your case it would not work if you hide the li as there is no element to hover if you hide the li
JS
$('li').hover(function() {
$(this).find('ul > li > a').fadeToggle(400);
});
HTML
link1
CSS
.hide {
display: none;
}
jsFiddle
Because your $('li') select ALL <li>s in the document, include the <li><a href='#'>link1</a></li>, try to use #id selector instead:
$(document).ready(function(){
$('#lis').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
I have a couple of tabs with varying heights. How do I prevent the page from jumping to the top of the container when I click on a tab link?
JSFiddle
http://jsfiddle.net/q1tdsar1/1/
Steps to reproduce issue: Click on tab 3, scroll down as if reading the content of tab 3 then click tab 1. Boom > Page Jump!
Here's my JS:
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
Here's the HTML
<div id="tabs">
<ul class="nav">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab-1" class="tab">Some content</div>
<div id="tab-2" class="tab">Some longer content</div>
<div id="tab-3" class="tab">Some even longer content</div>
</div>
Here's CSS:
#tabs ul.nav {
float: left;
width: 500px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline;
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li.active {
border-top:2px #FFFF66 solid;
background: #FFFFCC;
}
#tabs ul li.active a {
color: #333333;
}
#tabs div.tab {
background: #FFFFCC;
clear: both;
padding: 15px;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #000;
font-weight: bold;
}
You may need to use an equal height for all the tabs you have so far. So a script might be helpful, as this is not the page jump that happens, as you already have return false in the place of event.preventDefault();.
TabDivHeight = 0;
$('#tabs div.tab').each(function () {
$(this).show();
if ($(this).height() > TabDivHeight)
TabDivHeight = $(this).height();
$(this).hide();
});
$('#tabs div.tab').height(TabDivHeight);
Fiddle: http://jsfiddle.net/342fsu8o/
Or if you would prefer a CSS version, I would say, go for this:
#tabs div.tab {
background: #FFFFCC;
clear: both;
padding: 15px;
max-height: 200px;
overflow: auto;
}
Fiddle: http://jsfiddle.net/jv3bmtof/
Or if you prefer a smooth transition, you may use slideUp() and slideDown():
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').slideUp();
$(currentTab).slideDown();
return false;
});
Fiddle: http://jsfiddle.net/tdxyLvLs/
I have been searching for an answer for this question but still, my problem exists. I tried all the answers from here (StackOverflow) and from other websites but it still didn't solved my problem.
Additional Information:
There's no error on DevTools.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<script src="sample.js"></script>
</body>
</html>
CSS:
/*Nav Styles*/
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu {
color: red;
}
JS:
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(x);
Thanks a lot!
The issue is because your CSS rule for .activeMenu is not specific enough to override the colour set on the a element. You need to make the rule more specific:
.activeMenu a {
color: red;
}
Or set !important on it. The former is better practice.
Example fiddle
You must change your css too:
.activeMenu a {
color: red;
}
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(function() {
x();
});
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>