我尝试用java-script创建一个事件,这将允许我在不同的卡之间切换并隐藏和显示。 有一张四张卡片,当你点击第一张卡片时,它显示卡片下面的信息,当你再次点击它时,它隐藏它,四张卡片同样的东西, ,但我也希望当你点击第二张或第三张卡在第一张卡打开的情况下,会自动关闭第一张以显示第二张。 再次在四张牌之间切换事件。两个切换和两个点击相同的功能,每次点击都有不同的行为
我尝试使用点击两次,但似乎我创建了两者之间的冲突。
我该如何解决这个问题。
这是我使用的代码:
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("article").hide();
$(selector).show();
});
article:not(#article1) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-toggle="#article1">cart1</a>
<a href="#" data-toggle="#article2">cart 2</a>
<a href="#" data-toggle="#article3">cart 3</a>
<a href="#" data-toggle="#article4">cart 4</a>
<article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article2">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article>
<article id="article4">adipiscing elit, sed do eiusmod tempor</article>
我放弃你的代码放到一个codepen,但我不明白你在想什么实现,因为它似乎为我工作? https://codepen.io/anon/pen/MEZqEv?editors=1010在选项之间点击会显示相关文章,您能否准确解释您期望看到的以及您实际看到的内容? – delinear
当我点击卡之间它显示文章它的工作,但同样我也想,如果卡3打开我想,当我点击它它隐藏或显示 –
我添加下面的函数来获得两个事件但我现在有两个点击,只有第一个功能正在运行 –