问题
我迷失了阅读无数的 js 代码提示等,我发现很难知道从哪里开始。帮助!
所以基本上我在 CSS 中有一个主要的全屏背景图像,#main
div
并且我有每个带有小缩略图的列表项,当它们被单击时,它们会切换以在#main
div
.
HTML
<div id="main">
<ul id="thumbs">
<li>
<a href="#">
<img src="http://www.lorempixel.com/50/50" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.lorempixel.com/50/50" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.lorempixel.com/50/50" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.lorempixel.com/50/50" />
</a>
</li>
</ul>
</div>
CSS
#main {
background-image: url(http://www.lorempixel.com/500/50);
width: 500px;
height: 200px;
}
li {
list-style: none;
float: left;
padding: 10px;
}
小提琴
谢谢您的帮助。
更新的解决方案
我最终使用该data
属性解决了这个问题,并为 jQuery 提供了每个img
aclass
进行.thumb
交互。
HTML
<div id="main">
<ul id="thumbs">
<li>
<a href="#">
<img class="thumb" src="http://www.lorempixel.com/50/50"
data-header-img="http://www.lorempixel.com/500/200" />
</a>
</li>
<li>
<a href="#">
<img class="thumb" src="http://www.lorempixel.com/50/50"
data-header-img="http://www.lorempixel.com/500/200" />
</a>
</li>
<li>
<a href="#">
<img class="thumb" src="http://www.lorempixel.com/50/50"
data-header-img="http://www.lorempixel.com/500/200" />
</a>
</li>
<li>
<a href="#">
<img class="thumb" src="http://www.lorempixel.com/50/50"
data-header-img="http://www.lorempixel.com/500/200" />
</a>
</li>
</ul>
</div>
JS
$('.thumb').click(function() {
$('#main').css('background-image', "url("+$(this).attr('data-header-img')+")");
});
演示
感谢大家的意见和建议。Y。