我有三个按钮,当你悬停时它们会改变颜色(sprites),我想使用这些按钮,这样当它们被点击时,不同的内容将会显示。
我已经尝试了多个教程/论坛,但似乎没有什么效果。
这些按钮显示如下:
<div id="buttons">
<a href="#" id="1"class="des"></a>
<a href="#" id="2"class="brnd"></a>
<a href="#" id="3"class="strt"></a>
</div>
<div id="pages">
<div id="div1"><img src="..."></></div>
<div id="div2"><img src="..."></></div>
<div id="div3"><img src="..."></></div>
jQuery----
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
我的锚点似乎有问题。在这种设置下,它只会回到页面顶部。使用锚点#1、#2或#3时,它会跳转到相应的位置,但不会隐藏或显示内容。令人沮丧。
雪碧图目前没有问题。现在我正在尝试弄清楚如何使它们可点击,以便每个按钮被点击时都会显示不同的内容(3个div放在一个父div下面?)。如果有人确切知道如何做到这一点,我将非常感激。
内容主要是图片,并使用Jupiter主题与前端编辑器,因此我不知道是否可能是这方面的原因。但后台看起来没有任何问题。
另外,如果您能指引我一个教程,教我如何使它们在被点击时动画进出,那就太棒了。再次感谢。