I can't access "a" element with its href. Like this example, i need add class to element which got href="#one"
jQuery:
//tabs part is working fine
$('.tabs').hide();
$('.tabs:first').show();
$('ul li a').click(function(){
var target = $(this).attr('href');
$('.tabs').hide();
$(target).fadeIn(500);
$('ul li a').removeClass('selected');
$(this).addClass('selected');
});
//problem starts when i try to reach href
var link1 = '#one';
var link2 = '#two';
var link3 = '#three';
var takE = $('ul li a').each();
var finD = take.attr('href');
finD.addClass('thisisLink1');
html:
<ul>
<li><a href="#one">Home</a></li>
<li><a href="#two">Posts</a></li>
<li><a href="#three">About</a></li>
</ul>
<div class="tabs" id="one">Home Container</div>
<div class="tabs" id="two">Posts Container</div>
<div class="tabs" id="three">About Container</div>
I have tried each method but it didn't work. I need to access elements with their attr href and set the object to addClass or animate. This way returns me as a string.
$('ul li a').each(function() {
if(this.href == link1) $(this).addClass('thisisLink1');
if(this.href == link2) $(this).addClass('thisisLink2');
if(this.href == link3) $(this).addClass('thisisLink3');
});
You can also use an object mapping:
var links = {
'#one': 'thisislink1',
'#two': 'thisislink2',
'#three': 'thisislink3',
};
$.each(links, function(key, val) {
$('ul li a[href="' + key + '"]').addClass(val);
});