jQuery 在 Wordpress 中单击时显示/隐藏答案

【问题标题】：jQuery show/hide on click in WordpressjQuery 在 Wordpress 中单击时显示/隐藏
【发布时间】：2014-08-13 01:15:18
【问题描述】：

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

我浏览了多个教程/板，但似乎没有任何效果。

按钮显示如下：

<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 主题，所以我不知道它是否可以。但是后端似乎没有任何问题。

另外，如果您可以向我指出一个教程，该教程将教我如何制作它，以便它们在单击时动画进出，那将是合法的。再次感谢。

【问题讨论】：

先发布你最近的尝试怎么样？此外，您可以通过删除前 3 个句子来大大提高这个问题的质量。

标签： javascript jquery css html wordpress

【解决方案1】：

查看my 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();
});

【讨论】：

您的代码存在某些问题。首先，html5“data-”属性用于在标签内存储自定义数据。这是给可以处理标签本身的一些数据的开发人员的礼物。这背后的逻辑是，任何带有 data- 前缀的属性都不会被处理，会被渲染为数据元素。

【解决方案2】：

您可以简单地使用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 版本

查看Link 可能你想要这个

【讨论】：

你应该访问 Try.Jquery.com 那里非常有用的东西
randomsnippets.com/2011/04/10/…

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案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.
    });
});

【讨论】：

【解决方案5】：

您的代码中存在某些问题。首先，您尚未将 data-id 属性添加到锚标记并尝试在您的 js 代码中引用它们。 html5的“data-”属性用于在标签内部存储自定义数据。这背后的逻辑是，任何带有“data-前缀”的属性都不会被处理，会被渲染为数据元素。

那么你在图片标签之后添加的闭包不是必需的，语法上是错误的，是错误的。

在您的情况下，我们可以简单地使用“id”处理它，因为不需要使用数据属性。

简化后的代码会是这样的，

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

【讨论】：