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。当我只有一个和两个div工作时，我正在向你展示一个有效的。我弄乱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;}

回顾一下我在这里寻找的确切内容。我希望能够在1和2之间进行顶部div切换，同时使底部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');
});

Answer 2

与上述类似，除了原始代码......

<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'>
  One Block
</div>
<div id='two'>
  Two Block
</div>
 </div>
</div>

这是JavaScript

$(function(){
  $("#one").show();
   $('p a').click(function(){
     var id = $(this).text();

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

     });

  });
});

最后，CSS

 #one, #two {
     display:none;
   }
   .current{
      display:block;
    }

https://jsfiddle.net/aaronfranco/j6bzq5pj/1/

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

2 个答案: