单击按钮时显示特定div

-2

我和我的朋友正在构建一个网站，显示我们校园周围某些餐馆的菜单。我们正在尝试构建一个页面网站。网页上有两个主要的div。其中一个显示餐厅列表，另一个显示餐馆列表中所选餐厅的菜单。单击按钮时显示特定div

关于网络上的这个问题有太多的问题，我们已经尝试了无数的小提琴，但我们无法设法让它们工作。去年2个小提琴，我们已经试过如下：

> https://jsfiddle.net/VpkKn/387/ 

> https://jsfiddle.net/n53qg/

我们的页面是：http://178.62.254.14/test/

你能指导我们如何正确地使用这些小提琴？我们已经导入了jQuery库，并试图将这些脚本放在页面上的不同位置，包括页面的头标记。

编辑：页面的代码可能看起来有点混乱，因为我们也在同一时间学习html。我们对于对不起:)

摘要页面的代码如下：

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<meta content="width=device-width, initial-scale=1" name="viewport"> 
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"  
type="text/css"> 
<link href="css/w3.css" rel="stylesheet" type="text/css"> 
<link href="css/custom.css" rel="stylesheet" type="text/css"> 
<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> 
    </script> 
<title>Kalkanlı Keyif</title> 
</head> 

<body> 

<header> 
    <div class="w3-container"> 
     <div id="logocontainer" class="w3-col" style="width: 20%"> 
      <img src="images/logo.png"> </div> 
     <div id="blankcol" class="w3-col" style="width: 5%"> 
&thinsp;</div> 
     <div id="linkcontainer" class="w3-col" style="width: 75%"> 
      <div class="w3-col links" style="width: 20%"> 
       Link 1</div> 
      <div class="w3-col links" style="width: 20%"> 
       Link 2</div> 
      <div class="w3-col links" style="width: 20%"> 
       Link 3</div> 
      <div class="w3-col links" style="width: 20%"> 
       Link 4</div> 
      <div class="w3-col links" style="width: 20%"> 
       Link 5</div> 
     </div> 
    </div> 
</header> 
<video id="bgvid" autoplay="" controls="" 
    loop="" muted="" poster="images/background.jpg"> 
<source src="http://testweb.creatink.org/video/1.MP4" type="video/mp4"> 
</video> 
<div class="w3-container"> 
    <div id="restlist" class="w3-col" style="width: 20%"> 
     <button id="abarButton" class="restaurantButton" type="button"> 
     A Bar</button> 
     <button id="artolyeButton" class="restaurantButton" type="button"> 
     A‎&reg;tölye</button> 
     <button id="burgercityButton" class="restaurantButton"type="button"> 
     Burger City</button> 
     <button id="cafedaysButton" class="restaurantButton"type="button"> 
     Cafe Days</button> 

      ..... //Buttons continue 

     </div> 
    <div id="blankcol" class="w3-col" style="width: 5%"> 
&thinsp;</div> 
    <div id="menu" class="w3-col" style="width: 75%"> 

     <div class="donatello"> 
      <p class="restName">Donatello Pizza</p> 
      <table class="w3-table"> 

       <?php 
/*PHP code for showing the menu of a restaurant 
?> 
       ...................... 
     </table> 
     </div> 
    </div> 
</div> 

</body> 

</html>

来源

2016-02-24 Poyraz Sagtekin

您需要发布您的代码在你的问题。你看到了警告，但你虽然不适用于你，所以你突出链接代码来解决它。 – j08691

整个页面的代码？ –

http://stackoverflow.com/help/mcve – j08691

它被称为SPA（单页应用程序）。

所以这里是一个jfiddle，显示你的网站目前的行为。你是否也想获得有关功能的帮助？

你所要做的就是一次添加一个资源（js/css文件等），然后添加你的html（标签中的所有内容）。

你们应该使用AngularJS来做这个网站。它是为这些类型的应用程序制作的。

http://jsfiddle.net/jz3pLL22/

$('a').on('click', function(){ 
    var target = $(this).attr('rel'); 
    $("#"+target).show().siblings("div").hide(); 
});

来源

2016-02-24 21:58:22

单击按钮时显示特定div

回答

相关问题