I want to manage the display of my active class on the navigation bar.
I have a first home page with a button and when i click on this button. I want to arrive on the second page with a navigation menu with
<ul> <li> tags
And I want that when clicking on the button on the home page, by default I select the first navigation menu with a background color, and clicking on the other menus applies the same style to the clicked menu and deletes the active class on the old menu.
<pre>
//home page
<div>
Voir Menu
</div>
// Menu page
<nav class="nav-bloc-menu">
<ul id="list1">
<li id="testmenu" <?php if ($pec == 22) {echo "class=\"p22\"";}?>><a href="m1.php">Menu
1</a></li>
<li <?php if ($pec == 23) {echo "class=\"p23\"";}?>>Menu 2</li>
<li <?php if ($pec == 24) {echo "class=\"p24\"";}?>>Menu 3</li>
</ul>
</nav>
//jquery
$(".nav-bloc-menu ul a").click(function(){
$(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
$(this).css("background-color","#1c2335");
$(this).css("color","white");
});
</pre>
my index.php page
<pre>
<?php
$pagetitle = "Page";
$current_page = "menu.php";
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="script.js">
</script>
</head>
<body>
<div class="card">
<a href="menu.php" class="card-link">Voir Menu
</a>
</div>
</body>
</html>
</pre>
my menu.php page
<pre>
<nav class="nav-bloc-menu">
<ul id="list1">
<li class="<?php if ($current_page == "p1.php" || $current_page ==
"menu.php")
{?>active<?php }?>">p1<li>
<li class="<?php if ($current_page == "p2.php") {?>active<?php }?>">p2<li>
<li class="<?php if ($current_page == "p3.php") {?>active<?php }?>">p3<li>
</ul>
</nav>
</pre>
my script.js page
<pre>
$(document).ready(function(){
$(".nav-bloc-menu ul a").click(function(){
$(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
$(this).css("background-color","#1c2335");
$(this).css("color","white"); });
});
</pre>
my style.css page
<pre>
.nav-bloc-menu li .active{ background-color:#1c2335;color:white; }
</pre>
Above is the code i am using but doesn't work, can anyone help?
Otherwise just do based on page ie.(index.php,about.php) and just write class .nav-menu li .active{ background:white;color:black; }
<?php
$uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$uri_segments = explode('/', $uri_path);
$current_page= $uri_segments[0]; //ex: https://xxxx.com/about.php
?>
<ul class="nav-menu">
<li class="<?php if($current_page=="index.php"){ ?>active<?php } ?>">Home</li>
<li class="<?php if($current_page=="about.php"){ ?>active<?php } ?>">Home</li>
</ul>
I think this will help you.
Just add document.ready then only it work. just check this one.
$(document).ready(function(){
$(".nav-bloc-menu ul a").click(function(){
$(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
$(this).css("background-color","#1c2335");
$(this).css("color","white"); });
});
// if suppose using ajax page mean you need do like this
$(document).on("click",".nav-bloc-menu ul a",function(){
$(".nav-bloc-menu ul a").css("background-color","rgba(255,255,255,1)");
$(this).css("background-color","#1c2335");
$(this).css("color","white");
})
Sure this will work just try.
Related
Hello I am trying to use the jQuery toggle function just to change a ul display state from:
display: none;
to
display: block;
and this works however I am receiving the information from the database and with jQuery toggle it is showing all of the information not specifically from category id in which i click on
Here's what I have so far:
<section id="categories-wrapper">
<div class="cat-center">
<?php foreach($categories as $cat) { ?>
<?php if($cat['parent_id'] < 1) { ?>
<li>
<img src="media/categories/<?php echo $cat['image']; ?>">
<ul>
<?php
$childCategories = $objCatalogue->getChildCategories($cat['id']);
?>
<?php foreach($childCategories as $childCat) { ?>
<li><?php echo $childCat['name']; ?></li>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
</div>
</section>
the js code:
$('.cat-center li').click(function() {
event.stopPropagation();
$('.cat-center li ul').toggle('blind');
});
Now with the jQuery toggle when i click on the first link it shows the information from the other link as well, but with CSS using the hover command to just change display to block it works. Could someone please advise on what I am doing wrong.
Try changing your $('.cat-center li ul').toggle('blind');
to
$('.cat-center li').click(function() {
event.stopPropagation();
if ($(this).find('ul').is(":visible"))
{
$(this).find('ul').hide(500);
}
else
{
$('.cat-center li ul').hide(500);
$(this).find('ul').toggle('blind');
}
});
https://jsfiddle.net/m6jLo547/
I want to add class active by clicking on li elements for that I have used jquery but it is not working. Here is the jquery
$('ul li a').click(function(){
$('ul li.active').removeClass('active');
$('ul li').addClass('active');
});
and here is my html,php code
<nav class="primary navbar navbar-default">
<ul class="term_list nav navbar-nav">
<li class="active">ALL</li>
<?php
foreach($terms as $k=>$tv) :
$termname = strtolower($tv->name);
$termname = str_replace(' ', '-', $termname);
?>
<li class="">
<?php echo $tv->name;?></li>
<?php endforeach; ?>
</ul>
</nav>
I am new in jquery. Thanks in advance.
$('ul li').addClass('active') adds the active class to all li.
Since you click a a tag, you want its li parent to get the active class, so :
$(this).parent().addClass('active') should work.
$('ul li a').click(function(){
$('ul li').removeClass('active');
$(this).parent().addClass('active');
});
I wrote my site with php. I have the index file dynamically loading my pages from a pages folder. I have the nav menu in a separate file as well.
so I'm trying to have the text color highlighted when clicked, since I can't get the windowlocation to work. Because of the way I have it setup, the windowlocation returns /index.php with javascript or jquery. So I tried to keep it simple by just targeting the link.
<nav>
<ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Script to add selected class to highlight active link-->
<script>
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$("ul li a").addClass('selected');
});
});
</script>
my css is setup like this:
a.selected{color:#0066ff;}
I've tried throwing this code in every php file I created. Still nothing works. When I want an alert box to pop up with a message when a link is clicked, that works fine. why does this not work? Nothing changes when I run the code... Any suggestions?
If you reload the page by clicking each link then try
<nav>
<ul>
<li><a href="index.php?p=home" <?php (empty($_GET['p']) || $_GET['p'] == 'home') ? echo 'class="selected"' : ''?> >Home</a></li>
<li><a href="index.php?p=skills" <?php $_GET['p'] == 'skills' ? echo 'class="selected"' : ''?>>Skills</a></li>
<li><a href="index.php?p=about" <?php $_GET['p'] == 'about' ? echo 'class="selected"' : ''?>>About</a></li>
<li><a href="index.php?p=contact" <?php $_GET['p'] == 'contact' ? echo 'class="selected"' : ''?> >Contact</a></li>
</ul>
</nav>
Though you won't need the jQuery function.
If you don't want to reload the page then try this in your jQuery:
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
You need to add selected class in the clicked li element.
try like this:
$(document).ready(function(){
$("ul li a").click(function(){
$(".selected").removeClass('selected');
$(this).addClass('selected');
});
});
Actually you are redirecting when you are clicking in the li element. so jquery wil not be worked in this scenario.
it will work if you use one page application with out page reloading.
You can to do it by php like this:
// index.php
<?php
$page = isset($_REQUEST['p']) ? $_REQUEST['p'] : '';
switch($page) {
case 'skills' :
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'about' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'contact' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
default:
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
}
I created a menu in the header.php that will be included in each file, like index.php or contact-us.php.
The only problem, I have now, is to add selected to the selected main category in the menu.
This following code basically works until the selected page is loaded, after that, the selected attribute is removed.
Could you please help me to fix this problem?
HTML
<nav id="navigation">
<ul id="navtop">
<li class=" first has_navchild" id="Home">
Home
<ul class="submenu">
<li class=" first has_navchild">
Home
</li>
<li class=" last">
Who we are
</li>
</ul>
</li>
<li class=" has_navchild" id="Contacts">
Contacts
<ul class="submenu">
<li class=" first has_navchild">
Where we are
</li>
<li class=" last">
Contact form
</li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function () {
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
alert($(this).attr('id'));
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
alert($(this).attr('id'));
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});
});
Thank you for the help
I use this method:
$(window).load(function() {
var url = window.location;
$('#navtop a').filter(function() {
return this.href == url;
}).parents("li").addClass('selected');
});
It checks the current page loaded and automatically adds 'selected' class to its parent <li>
It's normal, your document ready was loaded when all is loaded, after you use an event onclick, but in fact nobody has clicked ... So nothing append.
First use this code for add good class on load :
$(document).ready(function () {
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Contacts").addClass("selected");
}
});
And add your on click function after ...
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});
Considering the case, that I have the following menu:
<ul>
<li>Index</li>
<li>About</li>
<li>Test<li>
</ul
And the menu is located in header.php . For each page (Index, About, Test), I have index.php, about.php and test.php, and all these files include the header.php !
What I need is adding a class to the li when we are on different pages. So if we are on the about.php, the class should be added on the second li.
Is there any way to do with jQuery, or what are the ways to handle this problem?
<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>
This might not be the best method, but it does the task serverside.
I use something like this on one of my static HTML websites, which you can adapt:
<div id="navigation">
<?php $currentPath = $_SERVER['REQUEST_URI']; ?>
<?php $currentClass = ' class="current"'; ?>
<ul id="nav">
<li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>>Home</li>
<li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>>Market <br />Challenge</li>
<li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>>Environmental <br />Benefits</li>
<li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>>Technology</li>
<li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>>Contact</li>
</ul>
</div>
Enjoy!
Create unique id for each of the li tags, the when the link is click on change the class if using jquery .attr function
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
Replace '.nav li' with something more appropriate to your DOM structure. Such as if your wrapper div has a class of menu, do:jQuery('.menu li')
Add a session variable that stores current page (before including header file). Check this value in header file and assign class.
$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';
in header,
<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>
Using shorthand if for in my opinion cleaner code.
<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
<li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
<li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
<li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>
For Above issue, i have done solution on codebins using jQuery.
DEMO: http://codebins.com/bin/4ldqpa4
Here i have mentioned steps for executing above solution.
1) Include latest jQuery.js and querystring-0.9.0.js javascript files in header tag.
2) HTML
<div id="panel">
<ul class="menu">
<li>
<a href="#?page=0">
Index
</a>
</li>
<li>
<a href="#?page=1">
About
</a>
</li>
<li>
<a href="#?page=2">
Test
</a>
<li>
</ul>
</div>
3) CSS
ul.menu{
border:1px solid #112266;
background:#ccc;
}
ul.menu li{
list-style:none;
display:inline-block;
margin-left:10px;
padding:0px;
width:60px;
text-align:center;
}
ul.menu li:hover{
background:#343434;
}
ul.menu li a{
padding:0px;
color:#113399;
text-decoration:none;
}
ul.menu li:hover a{
color:#c6b744;
text-decoration:underline;
}
ul.menu li.active{
background:#343434;
}
ul.menu li.active a{
color:#c6b744
}
4) jQuery:
$(function() {
$(".menu li").click(function() {
setTimeout(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
}, 200);
});
});
On above solution, i have to set href link like #?page= because on bins to run java script with new page redirection is not possible on bins as well as i have to use setTimeout function because currently page is not redirected just change its query string on same page by #?page=.
If you want to use above solution in your project then put above jQuery script on common place so that it will executes on each menu links and sets current page link with active class.
Note: Remove setTimeout function Wrapper just keep there code line scripts inside it. It's look like as below:
$(function() {
$(".menu li").click(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
});
});