在同一頁面上再次重複此切換

我有一個切換設置，對我正在使用的切換很有用。不過，我希望能夠在同一頁面上再次發揮作用，但我所有的努力都是一樣的。通常當我嘗試改變這個設置只有一個顯示在兩個顯示器上，並且不會切換。或者將只切換一次，它似乎覆蓋第二個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

在同一頁面上再次重複此切換

回答

相關問題