我正在尝试使用现有的href值作为操纵css的目标。不幸的是,我似乎无法使其发挥作用。我需要一点帮助,哪里出错了。
$(function(){
$('.tab-items a').each(function(){
var target_ids = $(this).attr('href').toLowerCase();;
var target_image =$(target_ids).find('a:first img').attr('src');
$(this).css('background' 'url("'+ target_image +'")');
})
})
.tab-items a {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
<li>
<a href="#nature_231">Nature</a>
<a href="#people_541">People</a>
<a href="#people_961">Animals</a>
</li>
</ul>
<div>
<div id="nature_231">
<a href="#"><img src="http://lorempixel.com/400/200/nature/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/nature/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/nature/3" alt="" /></a>
</div>
<div id="#people_541">
<a href="#"><img src="http://lorempixel.com/400/200/people/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/people/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/people/3" alt="" /></a>
</div>
<div id="#animals_961">
<a href="#"><img src="http://lorempixel.com/400/200/animals/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/animals/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/animals/3" alt="" /></a>
</div>
</div>
答案 0 :(得分:2)
看得出,工作正常
您在css()
的参数中缺少逗号分隔符
$(function(){
$('.tab-items a').each(function(){
var target_ids = $(this).attr('href').toLowerCase();;
console.log(target_ids)
var target_image =$(target_ids).find('a:first img').attr('src');
console.log(target_image)
$(this).css('background', 'url("'+ target_image +'")');
})
})
.tab-items a {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
<li>
<a href="#nature_231">Nature</a>
<a href="#people_541">People</a>
<a href="#people_961">Animals</a>
</li>
</ul>
<div>
<div id="nature_231">
<a href="#"><img src="http://lorempixel.com/400/200/nature/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/nature/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/nature/3" alt="" /></a>
</div>
<div id="#people_541">
<a href="#"><img src="http://lorempixel.com/400/200/people/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/people/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/people/3" alt="" /></a>
</div>
<div id="#animals_961">
<a href="#"><img src="http://lorempixel.com/400/200/animals/1" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/animals/2" alt="" /></a>
<a href="#"><img src="http://lorempixel.com/400/200/animals/3" alt="" /></a>
</div>
</div>
答案 1 :(得分:-1)
关于JQuery的IDK, 但是在Javascript中,我只是遍历了一个&#39; a&#39;标签搜索正确的href,像这样,你甚至可以使它成为ID你的href的函数:
var matchHref = function(input) {
var a = document.getElementsByTagName('a'), href, target;
for(var i = 0, j = a.length; i < j; ++i) {
href = a[i].getAttribute('href');
if(href === input){
target = a[i];
}
}
return target;
}
然后你可以这样称呼它:
matchHref('href-name').style.whatever-you-change;