WordPress中点击jQuery show/hide

Question

WordPress中点击jQuery show/hide

3

我有三个按钮，当你悬停时它们会改变颜色（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中：

<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主题与前端编辑器，因此我不知道是否可能是这方面的原因。但后台看起来没有任何问题。

另外，如果您能指引我一个教程，教我如何使它们在被点击时动画进出，那就太棒了。再次感谢。

- user3727569

你可以先发布一下你最新的尝试，然后再来讨论。另外，如果删除前三个句子，这个问题的质量会有很大提升。 - Austin Mullins

5个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- udit bhardwaj · Answer 1

您可以简单地使用hide和show。这里，您的按钮ID为Buttons。

$("#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版本。

查看链接，也许您需要这个。

- Mr7-itsurdeveloper · 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/

- Austin Mullins · Answer 3

请查看我的fiddle。

您发布的代码有两个主要问题，混淆了 jQuery 的数据属性和 Javascript 的 id，以及混淆了类（.）和 id（#）的 CSS 选择器。以下是已更正的 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();
});

- DWX · Answer 4

我在你的代码中只发现了一个问题，即

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

- ebiv · Answer 5

你的代码有一些问题。首先，你没有在锚点标签中添加data-id属性，并且尝试在你的js代码中引用它们。html5的"data-"属性用于在标签内存储自定义数据。其背后的逻辑是，任何带有"data-"前缀的属性将不会被处理，而是作为数据元素呈现。

然后，在图片标签后面添加的闭包是不必要和语法错误的，这是一个错误。

在你的情况下，我们可以简单地使用"id"来处理，因为没有太多需要使用data-属性。

简化后的代码如下：

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

动画：我已经添加了淡入淡出的动画效果。对于简单的淡入淡出效果，您可以使用jQuery的缩写动画，如.slideDown()、.fadeIn()、.animate()。这里还有更多选项可用：http://api.jquery.com/animate/

但是，您可以使用CSS3动画添加更多自定义动画，这些动画更加浏览器友好。选择标准是，如果您需要更多控制动画和事件跟踪，则可以选择jQuery动画，否则CSS3动画就像魔法一样。