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

我有一个切换设置，对我正在使用的切换很有用。不过，我希望能够在同一页面上再次发挥作用，但我所有的努力都是一样的。通常当我尝试改变这个设置只有一个显示在两个显示器上，并且不会切换。或者将只切换一次，它似乎覆盖第二个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;}

刚开始我是什么在这里寻找。我希望能够将顶部的div在1和2之间切换，同时让底部的div在3和4之间切换，而不会干扰其他切换效果。我查看了与我相关的问题，但大多数都是代码特定的，或者除了简单的div切换之外还具有不同的效果。任何帮助，将不胜感激，因为我几个星期以来一直在这个难题。非常感谢您阅读这个问题的人。^_^

来源

2016-03-13 FacetiousFemme

使用以下结构。 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; 
}

$('.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'); 
});

来源

2016-03-13 06:03:22 Morven

上述类似，但与你的原代码...

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

来源

2016-03-13 06:13:44

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

回答

相关问题