Question

在主页www.example.com我有div #thumbnail1, #thumbnail2, #thumbnail3。单击其中一个div时，将显示全屏div #details-wrapper（默认情况下隐藏），这要归功于以下JavaScript：

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会附加到网址上。）

2）同样，当导航到主页面网址后跟一个详细信息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：

NullPointerException

这是js：

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

并添加css

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);   
})

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

要在#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; }中附加div ids，您必须按照问题中的评论中提及的link进行操作

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

1 个答案: