With the following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
</head>
<body>
<ul id="cssdropdown">
<li class="headlink">
Search Engines
<ul>
<li>Google</li>
<li>Yahoo</li>
<li>Live Search</li>
</ul>
</li>
<li class="headlink">
Shopping
<ul>
<li>Amazon</li>
<li>eBay</li>
<li>CraigsList</li>
</ul>
</li>
</ul>
</body>
</html>
I can show a list on mouse over.
I want to show the lists on mouse click instead.
For instance, if I click on Search Engines, the Google, Yahoo and Live Search list will happear.
Try this:
$("UL UL").css("display", "none");
$(".title").click(function(e) {
e.preventDefault();
$(this).next("UL").toggle();
});
I've added a class of title to each of your clickable items so that the code can be reused.
Fiddle here
Just give an id to the <a> tag and make an event for that. like this: $('#search_engines').click(function () { });
This should give the behaviour you want, any open list will be hidden and the appropriate list opened:
$('li.headlink ul').hide();
$('li.headlink > a').click(function(e) {
e.preventDefault();
$('li.headlink ul').hide();
$(this).next().show();
});
or using the toggle approach so you can close all lists:
$('li.headlink ul').hide();
$('li.headlink > a').click(function(e) {
e.preventDefault();
var thisList = $(this).next();
thisList .toggle();
$('li.headlink ul').not(thisList).hide();
});
Here is a JSFiddle showing the second approach working
Related
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
I want dropdown menu also to be able to click the item. Example:
Menu item: Services
Sub items: - branding } These already have working links
- marketing }
But when I replace # with a link for Services, it does not work. when i click it nothing happens although if I right click and open in new tab it opens the URL.
I think it's related to the Javascript.
HTML:
<li class="dropdown">Services
<ul class="dropdown-menu">
<li>YouTube</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
Javascript:
$(document).ready(function() {
$('.js-activated').dropdownHover({
instantlyCloseOthers: false,
delay: 0
}).dropdown();
$('.dropdown-menu a').click(function (e) {
e.stopPropagation();
});
});
this code:
$('.dropdown-menu a').click(function (e) {
e.stopPropagation();
});
disables the default action (redirecting) on a click on 'a' element within the menu.
hope that helps.
I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:
HTML
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
jQuery
$("#link2").click(function(){
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
$(this).addClass('active');
}
});
Any idea what I'm missing? I'm not even detecting the active class at this point...
You could minimize your code to just
$('.additional-menu').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');
});
Demo at http://jsfiddle.net/DvHBp/
There are many problems in the code
//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){
// additional-menu is not an id it is a class and it is not a descendant of the li element
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
//if you are using a if statement then addClass should be outside the if block
$(this).addClass('active');
}
});
try
jQuery(function(){
var $lis = $('.additional-menu > li').click(function(){
$lis.removeClass('active');
$(this).addClass('active')
});
})
find() get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should use
$(this).parent().siblings('#additional-menu li')
because in your html structure #link2 a tag has no descendant of #additional-menu li
You can make something very generic:
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
And using this JavaScript:
$(function(){
$('.additional-menu > li').click(function(){
$('.additional-menu > li').removeClass('active');
$(this).addClass('active');
});
});
Try this solution :
HTML:
<ul class="additional-menu">
<li><a id="link1" href="link1"> Link1</a></li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.active{
background-color : red;
}
jQuery:
//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Demo
I have this menu
<ul id="menu" class="clearfix">
<li>
Product 1
</li>
<li>
Product 2
</li>
<li>
Product 3
</li>
<li class="last">
Product 4
</li>
</ul>
I want to make this effect. when you enter the page the text color of the menu items are white. If you click on one item it becomes active (keeping the white color text) and all the other items change it's color to gray, also when you hover over one the affected items are all the others.
I have tried with the .addClass but I have only managed to add the active class to the current item, but not change the others that aren´t active after the first click.
Anyone know the best jquery approach to this?
$("#menu li").hover(function() {
$(this).removeClass('grey').siblings().addClass('grey');
}, function() {
$(this).addClass('grey').siblings('.active').removeClass('grey');
//
}).on('click', function() {
$(this).removeClass('grey').addClass('active').siblings().addClass('grey').removeClass('active')
});
http://jsfiddle.net/y7Cn5/
Perhaps something like this: Updated, with hover functionality
jsFiddle
$("#menu > li").on("click", function(e) {
e.stopPropagation();
$(".active").removeClass("active");
$(this).removeClass("non-active").addClass("active").siblings().addClass("non-active");
})
.hover(function(e) {
$(".non-hover").removeClass("non-hover");
$(this).addClass("hover").siblings().addClass("non-hover");
}, function(e) {
$(".hover, .non-hover").removeClass("hover non-hover");
})
and if this doesn't answer the question, then the question is not understood and needs some rewording, this is everything asked about in the question
Here you go (siblings) selects all OTHER items in the same node
$("#menu li").click(function(){
$(this).addClass("active").css("color","white")
$(this).siblings().css("color","gray")
})
Try
$("#menu > li").hover( function( ) {
$(this).removeClass("hovered").siblings().addClass("hovered");
}, function( ) {
$(this).addClass("hovered");
});
$("#menu > li").click( function( ) {
$(this).addClass("active").siblings().removeClass("active");
});
i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty
You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.
try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});