javascript - 在同一页面上再次重复此切换

Question

我有一个切换设置，非常适合我的用途。但是我希望它在同一页面上再次运行，但我所有的努力都以相同的方式结束。通常，当我尝试更改此设置时，只设置两个显示器中的一个，并且不会切换。或者只会切换一次，它似乎会覆盖第二个 div 以完全不显示任何内容。

HTML

<div class='navipart'>
<div><h3><p align='center'><a id='show_one' style='color:#EFE66E;cursor:pointer;'>One</a>&nbsp;&nbsp; - &nbsp;&nbsp;<a id='show_two' style='color:#EFE66E;cursor:pointer;'>Two</a></p></h3></div>
<div>
<div id='one' class='current'>
</div>

<div id='two'>
</div>
</div>

</div>

以下是我想添加但遇到问题的内容。

<div class='navipart'>
<div><h3><p align='center'><a id='show_three' style='color:#EFE66E;cursor:pointer;'>Three</a>&nbsp;&nbsp; - &nbsp;&nbsp;<a id='show_four' style='color:#EFE66E;cursor:pointer;'>Four</a></p></h3></div>
<div>
<div id='three' class='current2'>
</div>

<div id='four'>
</div>
</div>

</div>

这是我拥有的 JS。我向您展示的是当我只有 divs 1 和 divs 时有效的一种。我试图弄乱 JS 的尝试是一团糟的代码而且无法正常工作:

$(window).load(function(){


$('p a').click(function(){

    var id = $(this).html().toLowerCase();

    $('.current').fadeOut(400, function(){
        $('#'+id).fadeIn(400);
        $('.current').removeClass('current');
        $('#'+id).addClass('current');

    });

});


});

这是它附带的一点 CSS:

#two {display:none;}
#four {display:none;}
#live {display:none;}
#live2 {display:none;}

只是为了准确地概括一下我在这里寻找的东西。我希望能够让顶部 div 在 1 和 2 之间切换，同时让底部 div 在 3 和 4 之间切换，而不会干扰其他切换效果。我确实查看了与我相关的问题，但大多数都是特定于代码的，或者除了简单的 div 切换之外还有不同的效果。任何对此的帮助将不胜感激，因为我已经为此困扰了几周了。 提前感谢那些通读这个问题的人。 ^_^

Answer 1

使用以下结构。 JSFIDDLE DEMO

HTML

<div class='navipart'>
  <a href='#one'>One</a>
  <a href='#two'>Two</a>
</div>

<div class="naviitems">
  <div id='one' class='current'>
    Content of the first div
  </div>
  <div id='two'>
    Content of the second div
  </div>
</div>

CSS

.navipart {
  text-align: center;
  margin-bottom: 30px;
}
.navipart a {
  font-size: 20px;
  color: #EFE66E;
  text-decoration: none;
  padding: 0 30px;

}
.naviitems div {
  display: none;
}
.naviitems div:first-child {
  display: block;
}

JS

$('.navipart a').click(function(e) {
  e.preventDefault();
  var id = $(this).attr("href");
  console.log(id);
  $('.naviitems div').hide();
  $('' + id).fadeIn(400);
  $('.current').removeClass('current');
  $('' + id).addClass('current');
});