Отображение одного элемента статьи и одновременное скрытие других с помощью JQuery - PullRequest
Новая
       36

Отображение одного элемента статьи и одновременное скрытие других с помощью JQuery

1 голос
/ 09 октября 2019

У меня есть три внутренних ссылки на HTML-странице, и когда я нажимаю на них, они некоторое время показывают элемент статьи, в котором есть некоторый текст. Каждая ссылка имеет отдельный элемент статьи (и другие элементы статьи должны быть скрыты, когда тот показан). Выбранный элемент статьи должен отображаться в течение 2 секунд и автоматически скрываться через 3 секунды.

Моя проблема заключается в том, что независимо от того, какую ссылку я нажимаю, она отображает и скрывает все элементы статьи, когда она должна отображаться, а затем скрываться тольковыбранный, и оставьте другие / не нажатые скрытыми все время. Как я мог изменить это? Вот мой код. 

<!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>

1 Ответ

1 голос
/ 09 октября 2019

Скрыть все статьи и показать ту, которая соответствует 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);
})
...