I am trying to work on achieving some-thing like this as shown in the image taken from IP-Board's website.
ip image
My code is like the following:-
<ul class="navmenu">
<li>//1st drop down box</li>
<li>// 2nd drop down box</li>
Now I want the li items background to change to white when a user clicks on it. I know this can be done via Jquery but I am not very well versed with it.
Hope any one of you can help me.
I tried this guide but did not work How can I highlight a selected list item with jquery?
Also please keep in mind that both the li elements contain jquery drop-downbox.
UPDATE
I want the Jquery so that if I click it once more the active class should be removed.
you can get active element by :active after selector like this:
DEMO
CSS
li:active{
background:red;
}
update:
if you want to background stay red you need to use JQuery. first create a class that you want style the active item like this:
.active{
background:red;
}
then use this JQuery code:
$("li").click(function(){
$("li.active").removeClass("active");
$(this).addClass("active");
});
jsFiddle is here
$('ul li').on('click', function(){
$(this).addClass('highlight');
});
and in css add class ".highlight"
.highlight { background-color:red; }
jQuery:
$('ul li').on('click', function(){
$(this).toggleClass('highlight');
});
CSS:
.highlight{
background-color: red;
}
DEMO
Related
I am trying to animate a menu item.
On move over it expands left, and on mouse out it contracts back.
This works fine.
I am also trying to add a class on click to give the button a specific color but it doesn't seem to work.
Here is a fiddle http://jsfiddle.net/g3ra912j/
css:
#menu1 .active {
background-color: #00f;
}
script:
$("#menu1").click(function () {
$(this).toggleClass("active")
})
onclick it supposed to turn blue, but it doesn't.
What am I doing wrong?
Thanks
You have an extra space in your CSS. Should be
#menu1.active {
background-color: #00f;
}
since you are adding the class .active to the same element as has the id menu1. The original CSS would target an element with class .active inside #menu1.
i had to deal with the same problem. use addClass('active') instead toggleClass. just have an if condition to check if the element already has active class before adding active class
let me know if it works.
and about the css bobdye was right
Can anybody help me with my code? I want to put different style of the current link, that I had selected. The hyperlinks do not go to different pages, they all refers to the current page.
here is my code:
HTML
<nav id="nav">
<ul>
<li class="current"><a href="#top" id="top-link" ><span>Home</span></a></li>
<li><span>Portfolio</span></li>
<li><span>About</span></li>
</ul>
</nav>
CSS
#nav ul li a:hover
{
color:#FFF;
background-color:#333;
}
#nav ul li a:active
{
color:#FFF;
background-color:#333;
}
FIDDLE DEMO HERE
you can change the .current class on click by using jquery code.
var links = $('#nav li');
links.click(function() {
$(this).parent().find(".current").removeClass('current');
$(this).addClass('current');
});
Check the DEMO.
First, here is the Fiddle Demo
I went with:
$('li').on('click', function(){
$(this).addClass('current')
.siblings().removeClass('current');
});
You can't do this with CSS only. You will need some Javascript to achieve that. (Apparently you can, see edit)
Even though your question isn't tagged jQuery and/or Javascript, here is an example of how to do that using jQuery:
Demo: http://jsfiddle.net/abhitalks/yW3Yt/1/
Relevant jQuery Code:
$("a").on("click", function() { // bind click event on all anchors
$("li").removeClass("current"); // remove current class from all list-items
$(this).parent().addClass("current"); // add current class to the parent of clicked anchor
});
Edit: Apparently, you could have a "CSS only" solution:
The idea is to use hidden radio buttons with corresponding labels. The radio inputs remain outside the anchors (because inputs are not valid contents for anchors), while labels are wrapped by the anchors.
Demo 2: http://jsfiddle.net/abhitalks/yW3Yt/4/
Relevant HTML:
<ul>
<li>
<input type="radio" name="opt" id="opt1"/>
<label for="opt1">Home</label>
...
Relevant CSS:
input[name="opt"] {
display: none;
}
input[name="opt"]:checked + a {
background-color: yellow;
}
Okay so I have a navigation sidebar and I want it so that when a link is clicked, the .clicked class gets added to the link clicked and the .clicked class gets removed from all other tags, if other tags of a .clicked class. Here is my javascript
$('#sidebar ul a').click(function(){
$('#sidebar ul .clicked').removeClass('.clicked');
$(this).addClass('clicked');
});
here is my css
.clicked {
background: url(../images/liHover.png) no-repeat;
background-position: -5px 0px;
color: white;
}
and here is my html
<body>
<div id="sidebar">
<div id="sidebarHeader">
<h1>top</h1>
</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</body>
But it doesn't seem to work. When I click a link / < li > it does add the class however it does not remove the .clicked class from the other elements. Any idea why?
your html is invalid for starters, try putting the li first in the list
<li>First</li>
// repeat for other items
your jquery is also invalid, your missing the hashtag '#sidebar' to reference an id element
finally your jquery function removeClass doesn't need a period before the class removeClass('clicked');
First of all,
Is your code wrapped in
$(document).ready(function() {
});
or
$(function() {
});
If not, your code may be executing before the DOM is ready, in which case it will not bind properly.
Next,
$('sidebar ul a')
should be
$('#sidebar ul a')
and
$('sidebar ul .clicked').removeClass('.clicked');
should be
$('sidebar ul .clicked').removeClass('clicked');
On the CSS side of things, the background won't display on the link unless you set display: block and give it a width. Finally, the image URL inside the parentheses should be in quotes, and as the previous poster stated, the background position should be part of "background" since it's a shortcut.
may be because the a tag in inline
if you try out to put it like a block
#sidebarHeader{
display:block;
}
and you should remove the clicked from a element
like this
$('sidebar ul a').removeClass('.clicked');
Below is a preview of what I have:
On the right is when I hover. What I want is for the delete icon to only show for that hover item.
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(".removeService").show();
});
});
</script>
This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.
Thanks!
If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.
See this fiddle here for an example.
A very simplified example could look like this:
$(document).ready(function(){
$('.remoteService').hide()
.click(function(){alert('delete!');});
$('#dashboard ul li span').hover(
function(){ //this is fired when the mouse hovers over
$(this).find('.remoteService').show();
},
function(){ //this is fired when the mouse hovers out
$(this).find('.remoteService').hide();
});
});
I hope this helps!
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(this).find(".removeService").show();
});
});
</script>
This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.
In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.
Edit:
Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.
DEMO here.
Why not use CSS :hover to get the same effect.
DEMO here
You have to do this with jQuery, you can achieve the same behavior with pure CSS:
#dashboard ul li .removeService {
display: none;
}
#dashboard ul li:hover .removeService {
display: inline;
}
Example on jsfiddle
How can we change an unordered list's item color when it is focused with tab or clicked with mouse using CSS ?
Edit:
Check JSFiddle
.form li input:focus
{
background-color:yellow;
}
Check that...
If your interested, this jQuery may work, please someone step in and correct it if its wrong!
$(".form li input").click(function(){
$(this).closest("li").css("background-color","yellow");
});
$(".form li input").blur(function(){
$(this).closest("li").css("background-color","white");
});
I don't know if it is possible with focussed list-items, because I guess it's not intended to be focussed. One thing you could do is to change the color on mouseover:
li:hover { color: #F00; background-color: #0F0; }
IF so try to use glowing tab .. which is newest and fastest technique to change hover tab.. IT will take position as argument. on hover event.
Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.
$( document ).ready(function()
{
// catch a click on any of the <li> items
$('li').click(function(){
// store a reference to the specific <li> that
// was clicked.
var $li = $(this);
// toggle the class (if it's applied, it's removed.
// if it's removed, re-apply it)
$li.toggleClass('highlight');
// Remove below code so that on click the highlight will be fixed
// Now, if it's applied, remove the class from any
// other <li> (single item clicked at a time)
if ($li.hasClass('highlight')){
$li.siblings().removeClass('highlight');
}
});
});