如何添加我的收藏夾格下一個和上一個按鈕

-4

<div id="next">Next</div> 
<div id="pre">Prev</div>

添加下一個和上一個按鈕。有沒有簡單的方法可以在燈箱內添加下一個和上一個按鈕。當我點擊下一個按鈕時，它會用下一個和上一個按鈕打開下一個對話框，並且與之前的按鈕相同。

$(document).ready(function() { 
 
    $('.cont-wrap > .cont-lnk').click(function() { 
 
    $(this).addClass('active'); 
 
    $('.active > .cont-href, .overlay').show(); 
 
    }); 
 
    function dDb() { 
 
    $('.active > .cont-href, .overlay').fadeOut(); 
 
    $('.cont-lnk').removeClass('active'); \t 
 
    }; 
 
    
 
    $('.overlay, .close').click(function() { 
 
    \t dDb(); 
 
    \t }); 
 
    $('.cont-href').click(function(e){ e.stopPropagation(); e.stopImmediatePropagation(); }); 
 
    
 
    });

body { 
 
    \t padding:0; 
 
    \t margin:0; 
 
    } 
 
    .cont-lnk { 
 
    \t display:block; 
 
    \t width:100px; 
 
    \t background:#999; 
 
    \t height:20px; 
 
    } 
 
    .cont-href { 
 
    display: none; 
 
    position: absolute; 
 
    width: 300px; 
 
    z-index: 1000; 
 
    background: #fff; 
 
    color: #000; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top: 35%; 
 
    height: 200px; 
 
    } 
 
    .overlay { 
 
    \t background:rgba(0, 0, 0, 0.5); 
 
    \t position:absolute; 
 
    \t width:100%; 
 
    \t height:100%; 
 
    \t z-index:999; 
 
    \t display:none; 
 
    } 
 
    .close { 
 
    \t display:block; 
 
    \t position:absolute; 
 
    \t right:10px; 
 
    \t top:10px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overlay"></div> 
 
    <div class="mwrap"> 
 
    <div class="cont-wrap"> 
 
    <div class="cont-lnk"> 
 
    Click here 
 
    <div class="cont-href"> 
 
    <div class="close"><a href="#">X</a></div> 
 
    box content comes here..... 
 
    <div id="next">next</div> 
 
    <div id="prev">pre</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="cont-wrap"> 
 
    <div class="cont-lnk"> 
 
    Click here 2 
 
    <div class="cont-href"> 
 
    <div class="close"><a href="#">X</a></div> 
 
    box content comes here 2 bla bla..... 
 
    <div id="next">next</div> 
 
    <div id="prev">pre</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

來源

2013-12-18 Najam ali shahid

不是爲你設置這個？所有你需要做的是複製和粘貼。至少我是這樣記住的。你也應該嘗試格式化你的代碼。 – Ruddy

如何設置格式可以指導我我這裏是新的....：/ –

@Ruddy我不認爲OP是使用庫，但是：是的：https：//github.com/lokesh/lightbox2沒有/可以 –

都在你的提琴首先更改下一個和上一個ID爲類（不是一個好的做法有多個元素具有相同的ID），然後添加以下代碼：

$(".next").click(function() { 
     $('.active > .cont-href, .overlay').hide(); 
     $(this).closest(".cont-lnk").removeClass('active'); 
     var currentContWrap = $(this).closest(".cont-wrap"); 
     var nextContWrap = currentContWrap.next(".cont-wrap"); 
     nextContWrap.children(".cont-lnk").addClass('active'); 
     $('.active > .cont-href, .overlay').show(); 
    }); 
    $(".prev").click(function() { 
     $('.active > .cont-href, .overlay').hide(); 
     $(this).closest(".cont-lnk").removeClass('active'); 
     var currentContWrap = $(this).closest(".cont-wrap"); 
     var prevContWrap = currentContWrap.prev(".cont-wrap"); 
     prevContWrap.children(".cont-lnk").addClass('active'); 
     $('.active > .cont-href, .overlay').show(); 
    });

工作演示：http://jsfiddle.net/hEEFq/

來源

2013-12-18 11:02:23 ER144

您不能在一個文檔頁面中多次使用一個id。

來源

2015-11-17 05:53:56

如何添加我的收藏夾格下一個和上一個按鈕

回答

相關問題