We Keep Coding

Add class to anchor-link on other page

I've got a navigation set up with links to anchors on specific page.
This works when on that specific page, but how can I add the class when coming from another page on my site?
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".sub-menu > li > a").on("click", function(){
$("a.active").removeClass("curlink");
$(this).addClass("curlink");
});
});
});
</script>

Simply pass one more hidden input element say with id navigator
when you are clicking on a link with id #a1 then set this hidden element value to "a1"
Send this element with form
On receiver page check for value of this element say $("#navigator").val();
On the basis of the value of this, which is "a1" in this case, set CSS of link with id a1 whatever you want, using $("#a1").css();

Another method is that on every hyperlink add a GET parameter and receive on the receiver side and on the basis of its value set CSS.
Let's say there are 3 links with id a1,a2,a3
Add a parameter say cameFrom in href URL e.g. href=".../*.html?cameFrom=a1" for link a1 and href=".../*.html?cameFrom=a2" for link a2 and so on
On receiver page get its value by using this function:
function param(name){
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
Use param(cameFrom) and get result.
Link to this function

There are many ideas/ways to achieve this, but if you have separate file which contains navigation code then you can do one way,
you can put in a hidden element with value of id of the <a> tag of menu of navigation. So when you land on the page and found that id value from the hidden field in jquery, you can make that <a> of navigation activated. I mean you can apply active class to that menu.
Tell me if this is not clear, I would try to make it simple.
In simple words,
Add one hidden element in your separate pages like <input type="hidden" value="about_us" id="nav-menu">
And in your master page,put jquery to get this value like:
var nav_menu = $('#nav-menu').val(); so in nav_menu you will have about_us as its value.
Now, in main master view file, you can write jquery to add active class for relevant manu like: $('.sub-menu > li > a').removeClass('active');$('#'+nav_menu).addClass('active');

JavaScript click href without ID

I'm on a site where I would like to grab all the href links and click it. I know I could do this. document.getElementById('yourLinkID').click(); how ever, the issue is the href dosen't have an id, only a title. Can I somehow click all the href by it's title?

Accessing the document.links array would be the solution you are looking for.
From there, though, clicking one would cause the page to navigate away to its target, and the script would stop executing. If you must click them all, what you could do is loop through them, and set the target of an iframe with the link's href attribute.

You can use document.querySelectorAll() with selector a[href] to retrieve all <a> elements having href attribute set, or [href] to retrieve all elements having an href attribute set; for..of loop to iterate collection
var hrefs = document.querySelectorAll("a[href]");
for (let elem of hrefs) {
// do stuff
console.log(elem.href);
}

use querySelectorAll:
document.querySelectorAll("[title=foo]")
Which will give you an array.
iterate through the array if your goal is to click all the links.
obviously, clicking a link will redirect you to that page and will pause script execution.
a dirty solution would be to use:
selectedElement.setAttribute('target', '_blank');
where selectedElement is the link's selector.
this makes the url open in a new tab.

No idea why you would want to do this as each <a href... will be activated and after the first one it will be up to the browser to work out what happens.
var aList = document.getElementsByTagName('a');
var i, max = aList.length;
for(i=0;i<max;i++) {
aList[i].click();
}
Hello
world

You can try the following solution,This will loop through each href and Click it.
$('a[href]').each(function ()
{
$(this).trigger('click');
});

Append new path in all the a href URL

I have seen the post How to update (append to) an href in jquery? , but it doesn't seem like the answer can help at my case.
I am currently using a plugin(easytab) to create a few different tab and every tab contains a tag like <a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">
and for some reason I have a button which append some extra path to all the href in order to redirect user to the right place.
I have tried to use
$("a#tab1").each(function() {
var _href = $(this).attr("href");
$(this).attr("href", _href + 'startDate=20160121?endDate=20160212');
});
but instead append the 'startDate=20160121?endDate=20160212' it replace everything to www.text.com/custom/questions/ask/startDate=20160121?endDate=20160212 , which is not right, how should i fix it?
Update 1:
I am sorry that i have provide wrong description at, the ids are actually the same in the plugin.
<a id="tabopen" href="www.text.com/custom/questions/ask/">
<a id="tabopen" href="www.text.com/default/questions/ask/">

$("a#tab1") selects a single <a> element having ID as tab1. To change the href attribute of a single element there is no need of each.
var href = $('a#tab1').attr('href') + '?startDate=20160121&endDate=20160212';
$('a#tab1').attr('href', href);
If having multiple elements with same ID, ID should be unique.
To select all the elements whose ID starts with tab, you can use attribute start with selector. I'll suggest to use a unique class on them.
To change the href attribute value of all the matched elements .attr(attributeName, function) with callback function can be used.
$('a[id^="tab"]').attr('href', function(i, oldHref) {
return oldHref + '?startDate=20160121&endDate=20160212';
});
As said by #charlietfl in the comment, the querystring format should be as follow
'?startDate=20160121&endDate=20160212'
^ ^
Update:
Saying again, ID should be unique., you can use class instead of ID for similar purpose elements.
Change the markup to use class
<a class="tabopen" href="www.text.com/custom/questions/ask/">
<a class="tabopen" href="www.text.com/default/questions/ask/">
And then use the selector
$('.tabopen').something...
BAD PRACTICE:
If you can't change the markup(auto-generated markup by some plugin), you can use attribute value selector to select all elements having same ID
$('a[id="tabopen"]').something...

get id of anchor inside list item, Javascript

Using Javascript, How to get id of list item, onclick of anchor tag inside list item. Ex.
<ul id="ul1">
`<li id=li1">Click</li>`
</ul>
Thanks to everyone

$('li').on('click', function(){
var $this = $(this), id = $this.attr('id');
// do something with id
});
This works because you the this variable refers to whatever li was clicked on

If you want the id of the parent:
$('a').on('click',function () {
var id = $(this).parent().attr("id");
// some script
});
EDIT
Take into considerations NewbornCodeMonkey's comment about the href linking to a different page...
Plain Javascript
You will need to add an onclick event to your anchor. You can't do it unobtrusively. So:
<a onclick="myfunction()" href="...">...</a>
javascript:
function myfunction() {
var id = this.parentNode.id;
// some script
}

The issue with your current code is that you will be redirecting your page from the anchor tag. You can use the href attribute to instead call a javascript function, or remove the anchor tag and use jquery to react to a mouse event using either the click function or the on function with click as a parameter.
Using the anchor tag, you can do something like this:
<li id=li1">Click</li>
function myClickFunction(){
var id = this.parentNode.id;
// use ID here
};
NOTE: If you still wish to redirect, then you can also leave the anchor tag pointing to page1.html, and use jquery to listen with one of the above functions that I have linked (.on or .click)
Another option instead of jquery is the getAttribute function
an example of getAttribute:
document.getElementsByTagName("a")[0].getAttribute("id");

how to set href value on all elements with a given ID?

I have several anchor tags on a page with the same id of 'hrefCompare'. I need to dynamically set the value of the href attribute on ALL of these a tags.
I am currently trying to do this:
$("#hrefCompare").attr("href", "foobar.com");
However, this only sets the very first anchor tag with that ID. there's 7 more on this page with the same id of 'hrefCompare'. How can I set all of the href values with that ID?

id must be unique, in this case I advice you to use class, which should work flawlessly:
$(".hrefCompare").attr("href", "foobar.com");
<a href="#" class="hrefCompare">a</b>
<a href="#" class="hrefCompare">b</b>

You cannot do this with IDs (they are unique), try using the same css class for all the elements you want (doesn't matter if this class does not exist).
HTML:
text1
text2
Please avoid using # in href attributes (if you care about behaviors). Read this to know why: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Then:
For older jQuery versions use .attr(..) otherwise use .prop(..)
$('.hrefCompare').prop('href', 'http://www.foobar.com');
Finally:
1) To assign the same url to every href attribute of an anchor element, do the following:
$('.hrefCompare').map(function(i, v){ return $(this).prop('href', 'http://www.foobar.com'); });
2) To assign different urls to every href attributes of the anchors according to their possitions (like an array - starting from zero -), do the following:
$('.hrefCompare').map(function(i, v){
if(i === 0) url = 'http://www.stackoverflow.com';
if(i === 1) url = 'http://www.foobar.com';
return $(this).prop('href', url);
});
Using this way...
first anchor, position 0: (text1 => if clicked => will redirect to stackoverflow)
second anchor, position 1: (text2 => if clicked => will redirect to foobar)

Ids must be unique in a DOM. try to use a class name and use jquery each function
$('a').each(function(k,v){
$(v).attr('href','mylink');
});