I'm working in Vue file, and what i want is to highlight the active element, what would be the best way to accomplish it?
code
<li #click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i>Test 1</li>
<li #click = "selectedComponent = 'appBugs2'"><i class="ion-bug"></i>Test 2</li>
<li #click = "selectedComponent = 'appBugs3'"><i class="ion-bug"></i>Test 3</li>
So lets say the first "li" element was selected -> it should give red background to "li", and if another one selected, it must reset the first one and assign the red background to the new selected element.
I tried to search on the web, but there is nothing much about it, it would be easy if you have only 2 options, but my list is much larger. So what would be the best way to solve this?
You could do it like this.
<li #click = "selectComponent('appBugs1', $event)"><i class="ion-bug"></i>Test 1</li>
<li #click = "selectComponent('appBugs2', $event)"><i class="ion-bug"></i>Test 2</li>
<li #click = "selectComponent('appBugs3', $event)"><i class="ion-bug"></i>Test 3</li>
Add the following method:
selectComponent: function(component, event){
if(this.activeLink){
this.activeLink.classList.remove('highlight');
}
this.activeLink = event.target;
this.activeLink.classList.add('highlight');
this.selectedComponent = component;
};
And the property activeLink. Then add your css styling, for example:
.highlight{
background-color: yellow;
}
Related
I'm working with HTML similar to this (coming from a third party web site - this is how the code is served, and I have no control over it):
<ul class"list">
<li>first list item</li>
<li>second list item</li>
<div>
<li>third list item</li>
<li>fourth list item</li>
</div>
<li>fifth list item</li>
<li>sixth list item</li>
</ul>
How can I select the fifth list item using CSS? With Javascript, if I use document.querySelectorAll('ul li') in the DOM, I get an iterable NodeList with all 6 of the <li> elements.
So then let list_items = document.querySelectorAll('ul li') allows me to access the fifth list item using list_items[4]. But if I try document.querySelectorAll('ul li:nth-child(5)') it doesn't work because, apparently, CSS only sees 4 <li> elements (the direct children of <ul>).
Is there a way to do this with CSS, or do I need to rework my approach?
* Edit *
I need to be able to select any of the li elements, arbitrarily, based on user input. The presence and number of li elements after the div section varies. I can correctly select any of the li elements before the div using something like ul > li:nth-of-type(${index_from_user_input}) - or within the div using something like ul > div > li:nth-of-type(${index_from_user_input}). I'm initially counting the number of lis and using that as the basis for the indexing...so if user input indicates that I need to select the third li, for example, I want to be able to simply use something like ul li:nth-of-type(3).
But if index_from _user_input points to an element after the div, then it doesn't work correctly, since CSS doesn't recognized the lis within the div, so the index numbers are off in my selector. I was hoping for a cleaner solution that uses only ul li:nth-child() or ul li:nth-of-type() so that I wouldn't have to check how many lis are within and after the div. I suspect it's just not possible, given the bad markup, but I'm not 100% sure of that, so I figured I'd ask here, in case somebody might have a clever way to do it. Otherwise, I can just rework the code and approach the whole thing differently.
this is how the code is served, and I have no control over it
Oh, you really do. You can just remove the erroneous div from the list with javascript.
Working Example:
/* IDENTIFY ELEMENTS */
var list = document.getElementsByTagName('ul')[0];
var erroneousDiv = list.getElementsByTagName('div')[0];
var select = document.getElementsByTagName('select')[0];
var button = document.getElementsByTagName('button')[0];
/* IDENTIFY LIST ITEMS */
var allListItems = document.querySelectorAll('ul li');
var listItemsToMove = erroneousDiv.getElementsByTagName('li');
var numberOfListItemsToMove = listItemsToMove.length;
/* REARRANGE LIST ITEMS AND REMOVE ERRONEOUS DIV */
for (var i = 0; i < numberOfListItemsToMove; i++) {
list.insertBefore(listItemsToMove[0], erroneousDiv);
}
list.removeChild(erroneousDiv);
/* SELECTOR FUNCTION */
function selectListItem() {
for (var i = 0; i < allListItems.length; i++) {
allListItems[i].removeAttribute('style');
}
var selected = select.value;
var listItem = document.querySelector('ul li:nth-of-type(' + selected + ')');
listItem.style.color = 'blue';
listItem.style.fontWeight = 'bold';
}
button.addEventListener('click', selectListItem, false);
ul, form {
display: inline-block;
margin-right: 80px;
vertical-align: middle;
}
<ul class"list">
<li>first list item</li>
<li>second list item</li>
<div>
<li>third list item</li>
<li>fourth list item</li>
</div>
<li>fifth list item</li>
<li>sixth list item</li>
</ul>
<form>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</select>
<button type="button">Select List Item</button>
</form>
So basically if you want an indicator on the link of the page you are currently on you just apply a style on the page for example:
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
It will apply whatever style is on the class active when you are in the home.aspx page...
Now I have something similar but this time, instead of directing to another page, the links will just redirect on the same page but filtered with querystrings...
I have:
<li>PROJECT 1</li>
<li>PROJECT 2</li>
<li>PROJECT 3</li>
What I would like to happen is I want to apply a css style when I click one of those links so that people know which project they are looking at.
Just add a little jquery to add the .active class to selected element.
<script>
jQuery(function($){
var url = window.location.href;
// give the li or a tag a class
$('.element-class-name a[href="'+ url +'"]').addClass('active');
$('.element-class-name a').filter(function() {
return this.href == url;
}).addClass('active');
});
</script>
Try caching selector $("a[href^=projects]") as variable , attach click event to cached selector , utilize .each() to iterate all elements in collection , set className to "active" if this current element === event.target
var a = $("a[href^=projects]");
a.click(function(e) {
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
var a = $("a[href^=projects]");
a.click(function(e) {
// Note, `e.preventDefault()` included for stacksnippets
e.preventDefault();
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>PROJECT 1
</li>
<li>PROJECT 2
</li>
<li>PROJECT 3
</li>
</ul>
Doing something like the following works also:
$('.link').on('click', function(e) {
$('.links li .link').removeClass('active');
$(this).addClass('active');
});
Where link is the class I gave the actual link within a list called links.
The example is here: http://codepen.io/anon/pen/OyJgBQ
I would like to have all my menu items which are common to all the pages on my website in a single header file. The problem lies that I need to define a class for the current menu item so it changes color. I`m using superfish for the menu, here is a very simple mockup...
<nav>
<ul class="sf-menu">
<li id="first-li">Home</li>
<li class="current">Page 1
<ul>
<li>Submenu 1 </li>
<li>Submenu 2
<ul>
<li>SUBSubmenu 1 </li>
</ul>
</li>
</ul>
</li>
<li>Page 2 </li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
Is it possible to remove class="current" , move the whole nav to the header file and then only specify the current class on each page?
My actual menu code is much much larger and this is why I do not want it repeated on every page.
use this in your current page script
Use jquery for the thing..
$('.sf-menu li a').click(function() {
$('.sf-menu li.current').removeClass('current');
$(this).closest('li').addClass('current');
});
find the fiddle here..http://jsfiddle.net/VudYx/
Add class="current" to the index.php li in the header and just use the following jQuery code in header.
$(document).ready(function() {
var curUrl = window.location.pathname;
curUrl=curUrl.replace(/\/$/, "");//support urls with or without trailing slash
$( ".sf-menu li" ).each(function(i) {
if(($(this).children().length > 0) && ($(this).children(":first").attr("href").split('/').pop()==curUrl.split('/').pop()))
{
$( ".sf-menu li" ).removeClass("current");
$(this).addClass("current");
}
});
})
I got it working exactly how I want by combining a little of all the answers.
First I gave id`s to all the 1st tier menu items, the ones I want highlighted, then on each page I move the current class like so...
<script>
$(document).ready(function() {
$( ".sf-menu li" ).removeClass("current");
$( "#menu2" ).addClass("current");
});
</script>
clean, simple and works without clicking, thanks to all that answered you all helped.
Personally I'd achieve this using CSS.
If each menu item <li> has its own class, and your <body> has a unique ID per page, you can style the current item appropriately such that:
<li class="navHome">Home</li>
<li class="navAbout">About<li>
and your home/about pages have a body tag such that:
<body id="pgHome"> or <body id="pgAbout">
Then you can directly style the current page's menu item:
#pgHome .navHome,
#pgAbout .navAbout
{
// styles to highlight this item
}
thanks for your time.
I've been having a lot of trouble trying to highlighting the "active" tab on a navbar i am using. I'm trying to do this through CSS but the problem arises when I change pages. I will add the following code:
function updateMenu(num)
{
var menuCode =
'<ul id="menu">' +
'<li><a href="software/menu.php" onclick="updateMenu(1);"';
if(num == 1){menuCode +=' class="current"';}
menuCode += '>Software</a></li>'+
'<li><a href="users/menu.php" onclick="updateMenu(2);"';
if(num == 2){menuCode +=' class="current"';}
menuCode += '>Software</a></li>';
document.getElementById("cssMenu").innerHTML = menuCode;
}
And my list goes as follows:
<ul id="menu">
<li>Software</li>
<li>Users</li>
</ul>
I feel it's an unelegant solution because of all the code wrote in the updateMenu function and i was wondering if there was a more elegant solution to my problem. (You can see it's on moving the "class=current" so the CSS works properly).
I'm not sure what your exact requirement is. Assuming that on clicking the tab, it does NOT go to another page, the following code will help [please use Jquery]:
HTML :
<ul id="menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Javascript :
<script>
$(document).ready(function(){
$("#menu li").click(function(){
$("#menu li").removeClass("highlight");
$(this).addClass("highlight");
});
});
</script>
CSS :
.highlight {
background: #f00;
}
This question already has answers here:
How to hover only the current li in nested ul?
(5 answers)
Closed 4 years ago.
I have got an simple html unordered list.
<ul>
<li>Item 1</li>
<li>
Group 1
<ul>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I want to use CSS to make a simple effect when the mouse is over an Item or a Group.
li:hover
{
background-color:#ff0000;
}
It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to highlight "Item 2" or "Item 3".
Has anyone an idea how to do this?
Thanks for your help!
===============================
EDIT
<ul>
<li>Item 1</li>
<li>
Group 1
<ul>
<li>Item 2</li>
<li>Group 2
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</li>
</ul>
Mouse Over xxx should highlight yyy
xxx -> yyy
Item1 -> Item1
Group1 -> Group1, Item2, Group2, Item3, Item4
Item2 -> Item2
Group2 -> Group2, Item3, Item4
Item3 -> Item3
Item4 -> Item4
Please see http://image-upload.de/image/r76d79/1c7af56a19.png ,just a quick drawing.
This solution isn't a purely HTML/CSS one, but it works. It uses the Javascript library jQuery.
http://jsfiddle.net/XP3Vp/
Put this in the head-section of your page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').mouseover(function()
{
if ($('li ul li:hover').length)
{
$('li ul li:hover').css('background','red');
}
else
{
$('li:hover').css('background','red');
}
});
$('li').mouseout(function()
{
$(this).css('background', 'transparent');
});
</script>
Use this if you don't want the underlying list items to be highlighted as well when moving the cursor over Group 1: http://jsfiddle.net/CwhhN/
The best you can do is to colorize the ul as well ..
ul{background-color:#fff;}
li:hover
{
background-color:#ff0000;
}
something like this http://jsfiddle.net/gaby/DxsDa/ although it will still highlight the group 1 text..
Alternatively you can resort to invalid html but i would not suggest that for obvious reasons.. http://jsfiddle.net/gaby/DxsDa/1/
Group 1 contains Item 2. So, when you are hovering Item 2 you are also hovering Group 1.
Thus, with CSS what you want is not possible without mis-formatting HTML on purpose.
With JS you can get there, though.
If this is acceptable, refer to #RobinJ's answer.
Found probably the best solution at the jQuery documentation.
http://api.jquery.com/event.stopPropagation/
$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('hover');
});
$('li').mouseout(function()
{
$(this).removeClass('hover');
});
Use class or id for UL element (which is parent for highlighted li's) and directly children selector:
ul#your_id > li:hover{ background-color: #f00; }
It will fix error which happens because you try to highlight every li's elements :)