我有三个按钮，当你悬停（精灵）时会改变颜色，我想使用这些按钮，这样当它们被点击时，将显示不同的内容。
我经历了多个教程/板，似乎没什么用。
按钮显示如下：
<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（我的最后一次尝试）如下：
<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时，它将转到div位置，但不会隐藏或显示内容。令人沮丧。
精灵工作正常。现在，我正在试图弄清楚如何使它们可点击，以便在单击每个按钮时显示不同的内容（3个div - 在父div下？）。如果有人知道如何做到这一点，我将非常感激。
内容主要是图像，我使用Jupiter主题与前端编辑器，所以我不知道它是否可能是那样的东西。但是后端似乎没有任何破坏。
另外，如果你可以指导我一个教程，它将教我如何制作它，以便在点击时进出动画，这将是合法的。再次感谢。
看看my fiddle。
你发布的代码有两个主要问题，混淆jQuery的数据属性和Javascript id，以及混淆CSS选择器的类（.）和ids（#）。这是更正后的html和javascript：
<div id="buttons">
<a href="#" data-id="1" class="des">Des</a>
<a href="#" data-id="2" class="brnd">Brnd</a>
<a href="#" data-id="3" class="strt">Strt</a>
</div>
<div id="pages">
<div id="div1"><p>This is 1</p></div>
<div id="div2"><p>This is 2</p></div>
<div id="div3"><p>This is 3</p></div>
</div>
$("#pages div").hide();
$("a").click(function() {
var id = $(this).data("id");
$("#pages div").hide();
$("#div" + id).show();
});
试试这个：
在这里检查教程http://api.jquery.com/show/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#f,#s,#t").hide();
$(".des").click(function(){
$("#f").toggle();
});
$(".brnd").click(function(){
$("#s").toggle();
});
$(".strt").click(function(){
$("#t").toggle();
});
});
</script>
我更新了你的html，脚本代码时更新了我的答案。
检查这个也使用＃作为id和。上课。
我在你的代码中只发现了一个问题，即
$(".div" + id).show();
在这里，而不是“。”（点），你必须使用“＃”。你必须用这个替换它： -
$("#div" + id).show();
因为你在“div”中使用“id”，而不是“class”。
更新您必须删除此：
$("#pages div").hide();
相反，你已将此添加到css文件： -
#pages div{display:none;}
这是更新的js脚本： -
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("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).fadeIn(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
您的代码中存在某些问题。首先，您没有将data-id属性添加到锚标记，并尝试在您的js代码中引用它们。 html5“data-”属性用于在标记内存储自定义数据。这背后的逻辑是任何具有“数据前缀”的属性都不会被处理并将被呈现为数据元素。
然后，您在图像标记之后添加的闭包不是必需的，并且在语法上是错误的并且是错误的。
在您的情况下，我们可以使用“id”简单地处理它，因为不需要使用data-attribute。
简化的代码就像，
HTML
<div id="buttons">
<a href="#" id="1"class="des">ONE</a>
<a href="#" id="2"class="brnd">TWO</a>
<a href="#" id="3"class="strt">THREE</a>
</div>
<div id="pages">
<div id="div1">IMG 1</div>
<div id="div2">IMG 2</div>
<div id="div3">IMG 3</div>
</div>
JS
$("a").click(function() {
var id = $(this).attr("id"); //retrieving the id
$("#pages div").hide(); // hiding all elements
$("#div" + id).fadeIn(500); // showing the required one only
});
CSS
#pages div{
display:none;
}
动画：我添加了fadein动画。对于简单淡入，淡出效果，您可以使用jquery短手动画，如.slideDown（）。fadeIn（）,. animate（）。这里有更多选择：http://api.jquery.com/animate/
但是，您可以使用CSS3动画添加更多自定义动画，这些动画更易于浏览。选择的标准是，如果您需要更多地控制动画和事件跟踪，您可以使用jQuery动画，否则CSS3动画就像魅力一样。