Question

我试图建立一个图库，当我点击一个按钮时，它会加载带图像的div。

问题在于，当我有2个按钮时，只有最后一个图像可以点击，有点难以解释，但你可以在我的页面上试一试：http://www.bravitus.com/#gallery

有两个这样的javascrips错误

SCRIPT1 ：

<script type="text/javascript">
 $(document).ready(function(){
    $(".slidingpriv").hide();
    $(".show_priv").show();
    $('.show_priv').click(function(){
    $(".slidingpriv").slideToggle();
    });

});

SCRIPT2：

<script type="text/javascript">


$(document).ready(function(){    
    $(".slidinggf").hide();
    $(".show_gf").show();
    $('.show_gf').click(function(){
    $(".slidinggf").slideToggle();
    });    
});

HTML：

<div class="row">

<div class="container">

        <!---section--->

        <div class="center">
        <a href="#show_priv" class="show_priv">Private projects</a>
        </div>
        <div class="slidingpriv">

        <a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image"> 
        <img href="" src="img/inasecond.jpg" width="300" height="300"  alt=""/></a> 
        </div>

        <a href="pages/2012/2012.html"><div id="imgstyle" class="image">
        <img src="img/2012.jpg" width="300" height="300"  alt=""/> </div></a>

        <a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
        <img src="img/Cover-text.jpg" width="300" height="300"  alt=""/> </div> </a> 

        </div>

        <!---section--->

        <div class="center">
        <a href="#show_gf" class="show_gf">Grundforløb</a>
        </div>

        <div class="slidinggf">

        <a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image"> 
        <img href="" src="img/inasecond.jpg" width="300" height="300"  alt=""/></a> 
        </div>

        <a href="pages/2012/2012.html"><div id="imgstyle" class="image">
        <img src="img/2012.jpg" width="300" height="300"  alt=""/> </div></a>

        <a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
        <img src="img/Cover-text.jpg" width="300" height="300"  alt=""/> </div> </a> 

        </div>

的CSS：

    .center{
    position:relative;
    width:100%;
    height:100%;
    margin:0 auto;
    text-align:center;
    /*background-color:#0C3;*/
}    
    .show_priv {
    display:none;
    position:relative;
    height:100%;
    /*background-color: #99CCFF;*/

}

    .slidinggf {
    height:100%;
    /**background-color: #99CCFF;**/
    width:100%;
    position:relative;
}

    .show_gf {
    display:none;
    position:relative;
    height:100%;
    /*background-color: #99CCFF;*/
}
    .slidingpriv {
    height:100%;
    /**background-color: #99CCFF;**/
    width:100%;
    position:relative;
}

谢谢;）

Answer 1

您应该使用浏览器开发人员工具，这些工具有一些非常易于使用的调试工具，例如inspect元素。

https://developer.chrome.com/devtools

https://developer.mozilla.org/en-US/docs/Tools

通过这个，您可以找到阻止您点击某些元素的能力，即使您确定它们应该有效。

还尝试将脚本组合到同一个文档中（$（document）.ready（function（）{}）;）

隐藏/显示div，我做错了什么

1 个答案: