jQuery 在 Wordpress 中单击时显示/隐藏
[英]jQuery show/hide on click in Wordpress
问题描述
我有三个按钮，当你悬停（精灵）时会改变颜色，我想使用这些按钮，这样当它们被点击时，会显示不同的内容。
我已经阅读了多个教程/板，但似乎没有任何效果。
按钮显示如下：
<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 主题，所以我不知道它是否可能与此有关。 但后端似乎没有任何问题。
此外，如果您可以向我指出一个教程，该教程将教我如何制作它，以便它们在单击时进入和退出动画，那将是合法的。 再次感谢。
5 个解决方案
解决方案1
0 2014-06-23 04:45:51
您可以简单使用隐藏并在此处显示您的按钮 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 版本
见链接可能是你想要的
解决方案2
0 2014-06-23 04:46:37
尝试这个：
在此处查看教程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 和 . 上课。
解决方案3
0 2014-06-23 05:07:54
看看我的小提琴。
您发布的代码有两个主要问题，将 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();
});
解决方案4
0 2014-06-23 05:33:46
我在您的代码中只发现了一个问题，即
$(".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
0 2014-06-23 08:21:27
您的代码中存在某些问题。 首先，您没有将 data-id 属性添加到锚标记并尝试在您的 js 代码中引用它们。 html5的“data-”属性用于在标签内存储自定义数据。这背后的逻辑是任何带有“data-前缀”的属性都不会被处理，而是作为数据元素呈现。
那么你在 image 标签之后添加的闭包是不必要的，而且在语法上是错误的，是一个错误。
在您的情况下，我们可以简单地使用“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 动画就像一个魅力。
jQuery的显示/隐藏无法在WordPress上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.