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');
});
Related
I am using the following code snippet from John Morris to investigate how Ajax might work for dynamically updating my menu:
<script>
$(document).ready(function(){
var trigger = $('#bs-example-navbar-collapse-1 ul li a'),
container = $('#navbar_content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
I also have this html code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li class="active">object1</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
which I would like to dynamically replace with this code when object 2 is clicked (to change the class of the selected hyperlink) - there is simlar code in object3.php and object4.php:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li>object1</li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
Everything works well on my first click of object 2, but subsequent clicks of other links will not update the navbar. I think this is related to bindings but I can not figure out what needs to be done to fix this. All suggestions appreciated.
Since you are overwriting the links inside #navbar_content, you need to use event delegation - see https://learn.jquery.com/events/event-delegation/
So instead of binding to
var trigger = $('#bs-example-navbar-collapse-1 ul li a')
you need to bind to your container and use event propagation. Try with something like -
<script>
$(document).ready(function(){
var container = $('#navbar_content');
container.on('click', 'li a', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
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");
}
});
I asign class to element but after loading page the class is removed.
I use this function in my script.js
$('#main-nav li ul li a').click(function(){
$('#main-nav li ul li').children().removeClass('current');
$(this).addClass('current');
});
and this in my PHP view:
<ul id="main-nav"> <!-- Accordion Menu -->
<li>
<a href="#" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
On site
</a>
</li>
<li>
<a href="#" class="nav-top-item current"> <!-- Add the class "current" to current menu item -->
Programs
</a>
<ul>
<li>Manage country</li>
<li>Manage channel</li>
<li>Manage Comments</li>
<li>Manage Categories</li>
</ul>
</li>
</ul> <!-- End #main-nav -->
If I use this <li>Manage</li> the class current is added but after load is removed.
How can I add class if I use php code after load page or have you any solution ?
jQuery is scripting language ... When loading the page it will definitely remove your previous functionality as click event doesn't fired so it won't work....
After loading the page just put some logic through PHP ....
with JQuery you can execute code when page is loaded :
$(document).ready(function(){
// your code here
});
this should work:
$(document).ready(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
if it doesn't work, try this block of script before </body> at the end of your document:
<script type="text/javascript">
$(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
</script>
this will force the execution after all the html is rendered by the php
First of all wrap your function in a $(document). ready(function () {}) and use the $('#main-nav'). on('click', 'li > a', function () {} ) approach inside of it. . on() is better to attach event listener to an dynamically loaded elements.
I have this div tags :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
and this JavaScript :
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
that JavaScript actually works when I'm using it with that div alone. but when I put it on my full code, that JavaScript doesn't work. I think that because there are more than one UL and LI tags on my code.
Now, the question is... how to apply that Javascript so that it can works ONLY for that div, even though there are other UL and LI tags.
Just use this instead targeting the div first then its contents
$('#target-share ul li')
JavaScript (not just Jquery) is all about scoping:
$('ul li').click(function() {
Causes that click to bind to every li in a ul so what you wanna do is scope the click down to a specific area of your page or set of elements across the page.
To scope it down to a specific element the best idea is to use a id like so:
$('#target-share ul li')
But to scope it down to a number of elements it is better to use a class like:
$('.target-share ul li')
Edit:
Also on() could be a good replacement here for click but it depends on where the HTML is being sourced and how it is being used, but thought I would make you aware of that function in case you didn't already know about it.
Select those ul li that have your data-val attribute:
$(function($) {
$('ul li[data-val]').click(function() {
$('input#shareto').val($(this).data('val'));
});
});