I researched quite a bit on onClick changes for links but couldn't quite figure out the solution I need. I have a side bar menu that contains multiple links. I have a default class added to the content I want to appear as default. However when I click another link in the sidebar, I want the previous link's "cur" class to be removed, replaced with nothing, then apply "cur" to the new link. Here's my code:
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.bankCssClass($data)" data-key="工商银行" data-code="ICBC-NET-B2C" class="bank_2">
</li>
jQUERY :
$(function(){
$('a').click(function(){
$('a').removeClass('');
$(this).addClass('cur');
});
});
$(function(){
$('a').click(function(){
$(this).parent('li').siblings().find('a').removeClass('cur');
$(this).addClass('cur');
});
});
Hope it will work :)
parent method
siblings method
Try this:
$(function(){
$('a').click(function(){
$('li.blank-2 a').removeClass('cur');
$(this).addClass('cur');
});
});
If your other lis also have the class blank-2
removeClass(className) takes the name of class you want to remove. So try this:
$('a').removeClass('cur');
First you could change yout HTML to something like this
HTML
<!-- add a parent class (if you dit not do already) You can give it a class like parent -->
<ul class="parent">
<!-- give you're child also a class (and one of them is active) -->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Jquery
$(function(){
// find you're specific group you want to click
$('a.child').click(function(event){
// catch and stop the default action
event.preventDefault();
// find the specific parent (upstream the dom) (in this case ul with class parent)
var $parent = $(this).closest("ul.parent");
// search within your dom structure (downstream) for a child with a class that is active
// and remove the class
$parent.find("a.active").removeClass("active");
// add the class to the clicked a
$(this).addClass('active');
});
});
i figure out whats the solution for this . I might wanna share it out .
HTML :
<ul data-bind="foreach: thirdPayBank" class="bank_list" style="height: 102px;">
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="工商银行" data-code="ICBC" class="bank_2"></li>
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="农业银行" data-code="ABC" class="bank_3"></li>
CSS :
.bank_list li a.cur {
width: 198px;
height: 48px;
float: left;
border: 1px solid #f0bebe;
background: url(../images/zijin_icon.png) no-repeat -897px -188px;
}
jQUERY :
$(".bank").click(function(){
$(".bank").removeClass('bankcur')
$(this).addClass('bankcur')
})
RESULT :
Related
As the title says, I'm trying to give a parent nav item an 'is-active' class if its child has an 'active' class in vanillaJS. I know how to do it in jQuery but I'm not wanting to add them in my project going forward.
I've managed to create a basic jsfiddle - http://jsfiddle.net/1k9su6vo/ - which is working how I intend it but I think it's a little too basic for when I start adding more complexity to the nav.
Is there a simple way to traverse the nav like jQuery does with .find(), .closest() etc but with js?
if (document.querySelector('.active')) {
document.querySelector('.active').parentNode.parentNode.parentNode.classList.add('is-active');
}
Modern browsers actually support .closest() method
see Mozilla developer site
Is there a simple way to traverse the nav like jQuery does with
.find(), .closest() etc but with js?
Yes. The Element.closest() method.
In your case, you want to add the is-active class on an immediate list item of the root list.
To make things easier, you can add a class to the root , eg: .wpr, to make immediate list items from the root easier to target:
document.querySelector('.active').closest('.wpr > li').classList.add('is-active');
if (document.querySelector('.active')) {
document.querySelector('.active').closest('.wpr > li').classList.add('is-active');
}
.is-active > a {
color: green;
}
li {
color: black;
}
.active {
color: green;
}
<ul class="wpr">
<li>test</li>
<li>test2
<ul>
<li>sub1</li>
<li><a class="active" href="#">sub2</a></li>
<li>sub3</li>
</ul>
</li>
<li>test3</li>
</ul>
To check if child node contains a specific className we can use
.classList.contains('active'); which returns boolean.
Working example:
if (document.querySelector('.active')) {
document.querySelector('.active').parentNode.parentNode.parentNode.classList.add('is-active');
}
const node = document.querySelector('.child');
const parentNode = node.parentNode;
const trigger = document.getElementById('trigger');
trigger.addEventListener('click', function() {
const hasActiveClass = node.classList.contains('active');
if (hasActiveClass) {
parentNode.classList.add('active');
}
})
.active {
color: red;
}
<div class="parent">
I am parent
<div class="child active"> I am child</div>
</div>
<button id="trigger" type="button">trigger active</button>
So I'm using a CMS that doesn't allow me to apply an onclick on the a tag or use an onclick. So it basically outputs in code like the following:
<ul class="ul-class" id="ul-id">
<li class="nav-items">Something1</li>
<li class="nav-items">Something2</li>
<li class="nav-items">Something3</li>
<li class="nav-items">Something4</li>
<li class="nav-items">Something5</li>
</ul>
What I need to be able to do is apply a class showing an underline on the link that's been clicked that then leaves if another link has been clicked. Unfortunately I cannot get the class to stay present with the click.
I've tried this: JS Onclick Add Class
But the OP was using an onclick to latch onto.
What I've ended up with is this:
$(".nav-items").click(function (e) {
$(this).addClass("nav-active").siblings().removeClass("nav-active");
});
Then for the CSS I have:
a.nav-active{
border-bottom: 5px solid green;
padding-bottom: 10px;
}
The border pops up but leaves immediately. Is there something wrong with the code or do I need to put something else in to make the border permanent unless clicked elsewhere?
You can do something like:
Note: You have to use .nav-active instead of a.nav-active because your .nav-active is <li> and an <a>
$(function() {
$(".nav-items").click(function(e) {
e.preventDefault(); /* To prevent redirect of <a> */
$(".nav-items").removeClass("nav-active"); /* Remove the class to all nav-items */
$(this).addClass("nav-active"); /* Add the class to clicked nav-items*/
});
});
.nav-active {
border-bottom: 5px solid green;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-class" id="ul-id">
<li class="nav-items">Something1</li>
<li class="nav-items">Something2</li>
<li class="nav-items">Something3</li>
<li class="nav-items">Something4</li>
<li class="nav-items">Something5</li>
</ul>
A possible approach with plain JavaScript
var myItems = Array.from(document.querySelectorAll(".nav-items")); // make array from NodeList
myItems.forEach(navItem => navItem.addEventListener("click", event => {
myItems.forEach(maybeSelectedBefore => maybeSelectedBefore.classList.remove("nav-active"));
event.target.classList.toggle("nav-active", true);
});
I had to reverse your CSS (to .nav-active a instead of a.nav-active) and add e.preventDefault(); to the jQuery, but otherwise it seems to be working. It wouldn't hurt to remove the class first before adding it, so change
$(this).addClass("nav-active").siblings().removeClass("nav-active");
to
$(this).siblings().removeClass("nav-active");
$(this).addClass("nav-active");
I have so far able to remove each appened elements using .remove() function of JQuery. my problem is the delete button is always showing on the first element.
I want to hide the delete button on first element and show the delete button when I append a new element.
I have set the delete button on the first element to
.delete-button:first-child{
display:none;
}
in my css but all succeeding appends do not show the delete button..
how can I do this with JQuery can it be done using CSS only?
li:first-child .delete-button { display:none }
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
Making assumptions on your markup since none was provided. You can accomplish it using css.
My interpretation of your requirement: If there is only one item, do not show a delete button; if there are multiple items, show a delete button for every item.
Your attempt didn't work because .delete-button:first-child selects all elements with the delete-button class that are also the first-child of their parent element. Presumably this would be all of your buttons.
You can instead use the :only-of-type selector on the elements that contain the delete buttons, e.g., assuming they have the item class:
.item:only-of-type .delete-button { display: none; }
Or if they are li elements:
li:only-of-type .delete-button { display: none; }
That way if the item/li/whatever is the only item then its delete button will be hidden automatically, but as soon as you add additional items the delete button will be shown automatically for all items.
Here's a simple demo with a bit of JS to mock up the add and delete functionality:
$("#parent").on("click", ".delete-button", function() {
$(this).parent().remove();
});
$(".add-button").on("click", function() {
$("#parent").children().first().clone().appendTo("#parent");
});
.item:only-of-type .delete-button { display: none; }
.item { margin: 3px; padding: 2px; width: 100px; border: thin black solid; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="add-button">Add Item</button>
<div id="parent">
<div class="item">
<button class="delete-button">Delete</button>
<div>An item</div>
</div>
</div>
You can try,
div ul:not(:first-child) {
.delete-button{
display:none;
}
}
You might wanna consider browser compatibility before using CSS - Browser support for CSS :first-child and :last-child
Having said that, With jQuery you can write an event handler to change css of all the child elements except the last.
Consider this example from jQuery: How to listen for DOM changes?
$("element-root").bind("DOMSubtreeModified", "CustomHandler");
Yes, Its possible by css only. I hope this snippet helps.
$(document).on('click','#AppendList', function(){
$("ul").append('<li>List <button class="delete-button">Delete</button></li>');
})
li .delete-button { display:none }
li:last-child .delete-button { display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
First <button class="delete-button">Delete</button>
</li>
<li>
Second <button class="delete-button">Delete</button>
</li>
</ul>
<hr>
<button type="button" id="AppendList">Add List</button>
I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/
Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.
.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.
To solve this problem, i had the idea to create a css class to add the image and when i click on "li", i add the class to it. But for some reason, it just doesnt work. The row appear properly in the ui-grid, but when i click on it, the image doesnt appear. I already tested the onclick() event with an alert() and the function is called.
Since i begin in these languages, i just feel like im assuming things (for exemple, does $(this) really refer to the "li" tag?). If anyone have an idea, it would be appreciated. Here is my code :
CSS
checked
{
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
JS
function isChecked()
{
alert("test");
$(this).addClass("checked");
}
HTML
<li class="addedParts" onclick="isChecked()">
<a href="javascript:addParts();">
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>
this will refer to window in your example as context is not passed.
Try this:
function isChecked(elem) {
$(elem).addClass("checked");
}
.checked {
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="addedParts" onclick="isChecked(this)">
<a>
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>