javascript - 使用 JavaScript 显示和隐藏 div 并使用 AJAX 附加到 URL

Question

在主页www.example.com上，我有div#thumbnail1、#thumbnail2、#thumbnail3。当单击这些 div 之一时，由于以下 JavaScript，将显示一个全屏 div #details-wrapper(默认情况下隐藏):

function showDiv() {
document.getElementById('details-wrapper').style.display = "block"; }

在这个 div #details-wrapper 中，我还有其他 div #details1、#details2、#details3，默认情况下它们都是隐藏的。

这就是我需要的:

1) 当单击缩略图 div 时，会显示相应的详细信息 div 并将其 id 附加到地址栏中的 URL。 (示例:单击 #thumbnail1，显示 #details-wrapper 和 #details1，并附加 /details1到 URL。)

2) 同样，当导航到主页 URL 后跟详细信息 ID 时(例如:www.example.com/details1)，#details-wrapper 和显示#details1。

3) 一次仅显示一个“详细信息”div。

4) 单击 div #next(位于 #details-wrapper 内)会显示下一个 #details div。

function showDiv() {
	document.getElementById('portfolio-details').style.display = "block";
}

function hideDiv() {
	document.getElementById('portfolio-details').style.display = "none";
}

#thumbnail1, #thumbnail2, #thumbnail3 {
    float: left;
    background: #000;
    height: 100px;
    width: 100px;
    margin: 20px;
    cursor: pointer;
}

#portfolio-details {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
}

#details1, #details2, #details3 {
    display: none;
}

#details1 {
    background: #333;
}

#details2 {
    background: #555;
}

#details3 {
    background: #777;
}

#next, #close {
    cursor: pointer;
    float: right;
    margin: 20px;
}

<div id="thumbnail1" onclick="showDiv()">
</div>
<div id="thumbnail2" onclick="showDiv()">
</div>
<div id="thumbnail3" onclick="showDiv()">
</div>
<div id="portfolio-details">
    <div id="details1">
    </div>
    <div id="details2">
    </div>
    <div id="details3">
    </div>
    <div id="next">
    Next
    </div>
    <div id="close" onclick="hideDiv()">
    Close
    </div>
</div>

Answer 1

解决方案如下:

使用此 HTML:

<div id="thumbnail1" data-id ="thumbnail1" class="thumbnail" >
</div>
<div id="thumbnail2" data-id ="thumbnail2"  class="thumbnail"">
</div>
<div id="thumbnail3"  data-id ="thumbnail3"  class="thumbnail">
</div>
<div id="portfolio-details">
    <div class ='details' id="details1">
        dsadsd1
    </div>
    <div class ='details' id="details2">
        asdsa2
    </div>
    <div class ='details'  id="details3">
        asdsada3
    </div>
    <div id="next">
    Next
    </div>
    <div id="close" >
    Close
    </div>
</div>

这是js:

function showDiv() {
    document.getElementById('portfolio-details').style.display = "block";
    var text = $(this).data('id');
    var lastChar = text.substr(text.length - 1);    
    $( "#portfolio-details div").removeClass('show-details');
    $( "#portfolio-details div:nth-child("+lastChar+")" ).addClass('show-details');
}

function hideDiv() {
    document.getElementById('portfolio-details').style.display = "none";
}

function next(){
    if($("#portfolio-details .details").last().hasClass("show-details")){
        $("#portfolio-details .details.show-details ").removeClass('show-details');
        $("#portfolio-details .details:first").addClass('show-details');
         /*put your url modification code here*/
    }else{  
        var next_div  = $(".details.show-details ").next('div');
        $("#portfolio-details .details.show-details ").removeClass('show-details');
        next_div.addClass('show-details');
        /*put your url modification code here*/

    }
}


$(document).ready(function(){
    $('#next').click(next);
    $('.thumbnail').click(showDiv);
    $('#close').click(hideDiv);   
})

并添加CSS

#thumbnail1, #thumbnail2, #thumbnail3 {
    float: left;
    background: #000;
    height: 100px;
    width: 100px;
    margin: 20px;
    cursor: pointer;
}

#portfolio-details {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
}

.details {
    display: none;
}

#details1 {
    background: #333;
}

#details2 {
    background: #555;
}

#details3 {
    background: #777;
}

#next, #close {
    cursor: pointer;
    float: right;
    margin: 20px;
}
.show-details{
    display:block !important;
}

http://jsfiddle.net/eqq7bxed/3/

要在 url 中附加 div ids，您必须遵循此 link正如您问题下的评论中提到的