Question

我有三个按钮，当你悬停（精灵）时会改变颜色，我想使用这些按钮，这样当点击它们时，会显示不同的内容。

我已经完成了多个教程/电路板，似乎没什么用。

按钮显示如下：

<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主题和前端编辑器，所以我不知道它是否可以与之相关。但是后端似乎没有什么打破。

另外，如果你能指点我一个教程，教会我如何制作它，以便点击时进出动画，那将是合法的。再次感谢。

Answer 1

您可以简单使用hide和show 这里按钮的ID是按钮

$("#ElementId" or ".Class").onClick(function(){
$("#OtherElement" or ".OtherElement").show()/hide()
});

您可以使用.Toggle()在状态之间切换所以

$("#Buttons").click(function(){
$(".brnd").hide();
$(".des").show();
$(".Start").hide();
});

您还可以使用$("#Buttons").onclick(function(){而不是click取决于您的jquery版本

请参阅Link可能是您想要这个

Answer 2

试试这个：

在这里查看教程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>

http://jsfiddle.net/9SabV/

我在更新你的html脚本代码时更新了我的答案。

也检查一下使用＃作为id和。为了上课。

http://jsfiddle.net/mdgd7/

Answer 3

查看my fiddle。

您发布的代码存在两个主要问题，将jQuery的数据属性与Javascript id混淆，并且混淆了类选择器（.）和ID（#）。这是更正后的html和javascript：

HTML

<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>

的Javascript

$("#pages div").hide();

$("a").click(function() {
   var id = $(this).data("id");
   $("#pages div").hide();
   $("#div" + id).show();
});

Answer 4

我的代码中只有一个问题，即

$(".div" + id).show();

这里代替＆＃34;。＆＃34;（点），你必须使用＆＃34;＃＆＃34;。您必须将其替换为： -

$("#div" + id).show();

因为你正在使用＆＃34; id＆＃34; in＆＃34; div＆＃34;，not＆＃34; class＆＃34;。

<强>更新你必须删除它：

$("#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.
    });
});

Answer 5

您的代码中存在某些问题。首先，您没有将data-id属性添加到锚标记，并尝试在您的js代码中引用它们。 html5＆＃34;数据 - ＆＃34; attribute用于在标记内存储自定义数据。这背后的逻辑是任何具有＆＃34; data-前缀＆＃34;的属性。将不会被处理，并将作为数据元素呈现。

然后，在图像标记之后添加的闭包不是必需的，并且在语法上是错误的并且是错误的。

在您的情况下，我们可以使用＆＃34; id＆＃34;因为没有太多需要使用数据属性。

简化代码就像，

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动画就像魅力一样。

在Wordpress中单击jQuery显示/隐藏

5 个答案:

HTML

的Javascript