I want to change this line:
<li id="activehome" ><a href="#" >Home</a></li>
to
<li id="activehome" class="active"><a href="#" >Home</a></li>
Adding that class attribute. How do I do this using Javascript or even Jquery will do. Thanks in advance. The line should be changed when the page loads.
jQuery, using addClass:
$('#activehome').addClass('active');
pure JS, using setAttribute:
document.getElementById('activehome').setAttribute('class', 'active');
or using className
document.getElementById('activehome').className = 'active';
$("#activehome").addClass('active');
$("#activehome > a").text('Home');
Related
I am trying to create a simple title spacer for my html code so that I don't have to type " " a lot and so the code looks more eat. However I have created this:
$(function() {
var subSpace = document.getElementById("subSpace");
var titleName = document.getElementById("subSpace").value;
subSpace.innerHTML = " " + titleName;
return false;
});
but it only runs against this code once:
<li><a href="#" id="subSpace" value="Start Menu" ></a></li>
<li><a href="#" id="subSpace" value="Tiles" ></a></li>
<li><a href="#" id="subSpace" value="Action Center" ></a></li>
<li><a href="#" id="subSpace" value="Settings" ></a></li>
<li></li>
<li></li>
<li></li>
So it runs Start Menu and properly spaces it the way I want but doesn't run tiles, action center, etc. Is there a way to fix this? Am I missing something? I could be way off as I am still learning.
Thank you in advance!
You should use a class instead of an ID as IDs are supposed to be unique. Other than that, you could be using CSS to add padding to the left:
.subspace {
padding-left:10px;
}
<li>Start Menu</li>
<li>Tiles</li>
<li>Action Center</li>
<li>Settings</li>
<li>Customizations</li>
<li>Windows Search</li>
<li>Microsoft Edge</li>
That's because you have multiple elements with an id of subSpace. You should use an id only once. If you have multiple elements with the same id, the first element will only be matched.
Also, on a side-note, you should really use CSS to style your page (i.e adding spacers/margins/paddings).
You have duplicates ids. Use class if you need to select multiple elements. You can select them using JQuery
<a href="#" id="subSpace" value="Start Menu" class="subSpace">
In your js:
$('.subSpace').html(' ');
I see another answer here which suggests a better way to do this only using CSS. You should consider that too.
I have the following HTML for consideration...
<ul class="foo">
<li class="bar"><a>Here #1</a></li>
<li class="bar">Here #2</li>
<li class="bar">Here #3</li>
<li class="bar">Here #4</li>
</ul>
The problem is that I have an anchor tag that does not have an href in the first list item tag. I want to use JQuery to add the href to the tag. I tried doing it like this (it did not work):
var fooBar;
fooBar = $('li.bar').children().first();
fooBar.attr('a', 'href="#1"');
I thought maybe I needed to pass in the index, but I figured the .first() would grab the correct element. Either way my code fails to do what I want.
I would greatly appreciate any direction and/or input.
Problem is this line
fooBar.attr('a', 'href="#1");
Do it as bellow
fooBar.attr('href', '#1');
Here is the correct way of setting attribute value:
fooBar.attr('href', "#1");
You can use like this
$('li.bar').children('a').first().attr('href', '#1');
var add_attr = $('.foo > li:first-child');
$(add_attr).find("a").attr('href','#');
I'm trying to change the CSS of the cursor to default on a a href link of # on the menu-item-4082 "About" link below. And I don't know why this seemingly simple function doesn't want to work.
Must be something simple I'm not seeing. Is my CSS selector correct?
Or is there a different or better way to change the CSS with jQuery? What about removing the href="#" as well?
Fiddle: http://jsfiddle.net/2nbad1gc/
Function:
$("li#menu-item-4082 .not-click").css("cursor","default");
HTML
<ul id="menu-main-menu-bar">
<li id="menu-item-217" class="menu-item">
Home
</li>
<li id="menu-item-4082" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-has-children menu-item-4082
has-dropdown not-click">
About
</li>
<ul class="dropdown">
<li id="menu-item-158" class="menu-item menu-item-158">
Values
</li>
<li id="menu-item-4083" class="menu-item menu-item-4083">
Why
</li>
</ul>
Is my CSS selector correct?
No, it's incorrect. It should be:
$("li#menu-item-4082.not-click a").css("cursor","default");
You were trying to select the child of li#menu-item-4082 whose class is not-click. When in fact, the li itself had the class .not-click.
Remove the space between $("li#menu-item-4082 .not-click").
As a side note, I'd suggest adding a class rather than adding inline CSS.
$("li#menu-item-4082.not-click a").addClass('default-cursor');
.default-cursor {
cursor: default;
}
.. you could also remove the href attribute completely:
$("li#menu-item-4082.not-click a").removeAttr('href');
If you wanted to avoid jQuery completely, you could also remove the href attribute using plain JS:
Single element:
document.querySelector('#menu-main-menu-bar .not-click a').removeAttribute('href');
Multiple elements:
var anchors = document.querySelectorAll('#menu-main-menu-bar .not-click a');
Array.prototype.forEach.call(anchors, function (el, i) {
el.removeAttribute('href');
});
or you could avoid JS and just use CSS:
li#menu-item-4082.not-click a {
cursor: default;
}
Just use simple css
.not-click a{
cursor: default;
}
http://jsfiddle.net/2nbad1gc/14/
Your selector needs to be modified to
$('li#menu-item-4082.not-click a').css("cursor", "default");
Usually it is recommended to add a class to the HTML element that sets cursor to default rather than directly change the CSS with jQuery like this.
I'm new to js/bootstrap and am reading about it from the official website.
I'm having problem with the nav-tabs. In the official example, they are taking the user to some other url, like this:
<ul class="nav nav-tabs">
<li class="active">Search</li>
<li>Click</li>
<li>Play</li>
<li>Hours Viewed</li>
</ul>
But my requirement is to call some js method on click on these tabs.
Is it possible using nav-tabs ? or do I have to use buttons ?
You can change the native comportement of the <a> with JS. For example, if you set something like this, the link will execute your doSomething function but not link you to another page :
click me
To go further, if you want to better separate the JS and the HTML (good practice), avoid the inline-javascript and prefer the use of listener : https://developer.mozilla.org/fr/docs/DOM/element.addEventListener
The simplest way I can think of is to add an onclick attribute for each <a> tag...
Maybe something like this...
<ul class="nav nav-tabs">
<li><a onclick="clickFirst();" href="#">Click</a></li>
<li><a onclick="clickSecond();" href="#">Play</a></li>
<li><a onclick="clickThird();" href="#">Hours Viewed</a></li>
</ul>
and add this in your script tag...
function clickFirst() {
alert('First anchor clicked...');
}
function clickSecond() {
alert('Second anchor clicked...');
}
function clickThird() {
alert('Third anchor clicked...');
}
You can use bootstrap javascript. And this one is about tab.
Here is a sample code:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output