使用 JQuery 显示一个文章元素并同时隐藏其他元素

Question

我在 HTML 页面上有三个内部 links，当我单击它们时，它们会显示一个文章元素一段时间，其中有一些文本。每个 link 都有一个单独的文章元素（其他文章元素在显示时应该被隐藏）。所选文章元素必须显示 2 秒，并在 3 秒后自动隐藏。

我的问题是，无论我点击哪个 link，它都会显示和隐藏所有文章元素，当它应该只显示然后隐藏选定的元素时，并保持 others/non-clicked 隐藏所有时间。我怎么能改变这个？这是我的代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
  $("a").click(function(){
    $("article").show(2000).hide(3000);
      $("article").siblings("article").hide();
  });
});




</script>
</head>

<body class="siblings">
 <a href="#Googlelink.1">Google Chrome</a> <br />
  <a href="#Mozillalink.2">Mozilla Firefox</a> <br />
  <a href="#Edgelink.3">Microsoft Edge</a> <br />

<article>
  <a href="#Googlelink.1"><h1>Google Chrome</h1></a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue. 
  Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo. In rhoncus hendrerit accumsan.
  Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Mozillalink.2"><h1>Mozilla Firefox</h1></a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue.
  Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo.
  In rhoncus hendrerit accumsan. Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Edgelink.3"><h1>Microsoft Edge</h1></a><br />
  <p>Microsoft Edge is a web browser developed by Microsoft. It was first released for Windows 10 and Xbox One in 2015, then for Android and iOS in 2017,[8][9] and macOS in 2019.[10]

Edge includes integration with Cortana and has extensions hosted on the Microsoft Store. Unlike Internet Explorer, Edge does not support the legacy ActiveX and BHO technologies.  </p>
</article>


</body>
</html>

Answer 1

隐藏所有文章并显示具有匹配 href 的文章，使用单击的锚元素的 href 属性：

$("article").hide();
$("a").click(function(){
   href=$(this).attr('href');
   $("article a").each(function(i,e){
    if($(this).attr('href')==href){
     $(this).parent().show(2000).hide(3000); 
    }
   })
});

$(document).ready(function(){
  $("article").hide();
  $("a").click(function(){
   href=$(this).attr('href');
   $("article a").each(function(i,e){
    if($(this).attr('href')==href){
     $(this).parent().show(2000).hide(3000); 
    }
   })

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="siblings">
 <a href="#Googlelink.1">Google Chrome</a> <br />
  <a href="#Mozillalink.2">Mozilla Firefox</a> <br />
  <a href="#Edgelink.3">Microsoft Edge</a> <br />

<article>
  <a href="#Googlelink.1"><h1>Google Chrome</h1></a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue. 
  Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo. In rhoncus hendrerit accumsan.
  Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Mozillalink.2"><h1>Mozilla Firefox</h1></a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue.
  Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo.
  In rhoncus hendrerit accumsan. Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Edgelink.3"><h1>Microsoft Edge</h1></a><br />
  <p>Microsoft Edge is a web browser developed by Microsoft. It was first released for Windows 10 and Xbox One in 2015, then for Android and iOS in 2017,[8][9] and macOS in 2019.[10]

Edge includes integration with Cortana and has extensions hosted on the Microsoft Store. Unlike Internet Explorer, Edge does not support the legacy ActiveX and BHO technologies.  </p>
</article>


</body>

甚至更短：

$("article").hide();
$("a").click(function() {
  href = $(this).attr('href');
  $("article a[href='" + href + "']").parent().show(2000).hide(3000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#Googlelink.1">Google Chrome</a> <br />
<a href="#Mozillalink.2">Mozilla Firefox</a> <br />
<a href="#Edgelink.3">Microsoft Edge</a> <br />

<article>
  <a href="#Googlelink.1">
    <h1>Google Chrome</h1>
  </a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue. Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo. In rhoncus hendrerit accumsan.
    Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Mozillalink.2">
    <h1>Mozilla Firefox</h1>
  </a><br />
  <p>Morbi eget urna lacinia, rutrum dolor ac, malesuada velit. Aliquam sit amet facilisis augue. Pellentesque lorem purus, porttitor eget posuere sed, hendrerit a tortor. Suspendisse molestie leo sollicitudin ullamcorper commodo. In rhoncus hendrerit accumsan.
    Cras et leo nec diam volutpat egestas. Maecenas ac viverra dui. Aliquam nibh enim, lacinia sed ipsum sed, imperdiet sollicitudin dui. </p>
</article>

<article>
  <a href="#Edgelink.3">
    <h1>Microsoft Edge</h1>
  </a><br />
  <p>Microsoft Edge is a web browser developed by Microsoft. It was first released for Windows 10 and Xbox One in 2015, then for Android and iOS in 2017,[8][9] and macOS in 2019.[10] Edge includes integration with Cortana and has extensions hosted on the
    Microsoft Store. Unlike Internet Explorer, Edge does not support the legacy ActiveX and BHO technologies. </p>
</article>

$("article").hide();
$("a").click(function() {
  href = $(this).attr('href');
  $("article a[href='" + href + "']").parent().show(2000).hide(3000);
})

使用 JQuery 显示一个文章元素并同时隐藏其他元素

Showing one article element and hiding others at the same time using JQuery

jquery

hyperlink

article