Если я нажму на кнопку1, я получу контент1, а затем, если я нажму кнопку button2, я получу контент2, но под content1. Content1 все еще отображается. И это проблема. Это содержимое должно отображаться в одном и том же месте, но в зависимости от того, какая кнопка нажата. Итак, если я нажму кнопку1, я должен получить 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>
$("divs:visible").hide();
должен быть $(".divs:visible").hide();
В дополнение к тому, что ответил 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>