Question

如果我点击button1我得到content1然后如果我点击button2我得到content2但是在content1下。 Content1仍然可见。这是一个问题。该内容应显示在同一位置，但取决于按下哪个按钮。所以，如果我点击button1我应该得到content1然后如果我点击button2我应该得到content2而不是content1。你能帮助我吗？这是我的代码：

<script src="public/javascripts/jquery.js" type="text/javascript"></script>

 <div id="list" >
    <input id="Button1" class="links" type="button" value="Trasa Kraków - Warszawa"   onclick="ShowHide()" data-showdiv="Content1" /> 
    <input id="Button2" class="links" type="button" value="Trasa Kraków - Wieliczka"  data-showdiv="Content2" />
    <input id="Button3" type="button" value="Trasa Nowy York - Pekin"   onclick=":D" />
    <input id="Button4" type="button" value="Show Status"   onclick="ShowHide()" />
    <input id="Button5" type="button" value="Show Status"   onclick="ShowHide()" />
</div>

<div id="Content1" class="divs" style="display:none" >
    <img src="http://kobylnica.pl/pic/item,69,1,x.jpg" alt="Tekst alternatywny" width="500" height "600"/>
    Miejsce na wyświetlenie filmiku i opisu trasy </div>

<div id="Content2" class="divs" style="display:none" >
    <img src="http://cdn32.se.smcloud.net/t/photos/111759/robie_rowery_z_drewna.jpg" alt="Tekst alternatywny" width="500" height "600"/>
    Miejsce na wyświetlenie filmiku i opisu trasy </div>

<script type="text/javascript">
    $(".links").click(function(){
    $("divs:visible").hide();
    $("#"+$(this).attr("data-showdiv")).show();
});

</script>

Answer 1

$("divs:visible").hide();应为$(".divs:visible").hide();

Answer 2

除了StaticVoid的回答之外，你还在其中一个按钮上缺少class =“links”。

<script src="public/javascripts/jquery.js" type="text/javascript"></script>

 <div id="list" >
    <input id="Button1" class="links" type="button" value="Trasa Kraków - Warszawa"   onclick="ShowHide()" data-showdiv="Content1" /> 
    <input id="Button2" class="links" type="button" value="Trasa Kraków - Wieliczka"  data-showdiv="Content2" />
    <input id="Button3" class="links" type="button" value="Trasa Nowy York - Pekin"   onclick=":D" />
    <input id="Button4" type="button" value="Show Status"   onclick="ShowHide()" />
    <input id="Button5" type="button" value="Show Status"   onclick="ShowHide()" />
</div>

<div id="Content1" class="divs" style="display:none" >
    <img src="http://kobylnica.pl/pic/item,69,1,x.jpg" alt="Tekst alternatywny" width="500" height "600"/>
    Miejsce na wyświetlenie filmiku i opisu trasy </div>

<div id="Content2" class="divs" style="display:none" >
    <img src="http://cdn32.se.smcloud.net/t/photos/111759/robie_rowery_z_drewna.jpg" alt="Tekst alternatywny" width="500" height "600"/>
    Miejsce na wyświetlenie filmiku i opisu trasy </div>

<script type="text/javascript">
    $(".links").click(function(){
    $(".divs:visible").hide();
    $("#"+$(this).attr("data-showdiv")).show();
});

</script>

http://jsfiddle.net/RMbPF/

根据按下的按钮显示div

2 个答案: