Javascript 单击按钮时显示特定的div_Javascript_Jquery_Html_Css

Javascript 单击按钮时显示特定的div

javascript jquery html css

Javascript 单击按钮时显示特定的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我和我的朋友正在建立一个网站，展示校园内某些餐厅的菜单。我们正在尝试制作一个单页网站。页面上有两个主要div。其中一个显示餐厅列表，另一个显示餐厅列表中所选餐厅的菜单关于这一点，网络上有太多的问题，我们尝试了无数的小提琴，但我们无法让它们发挥作用。我们尝试的最后两个小提琴如下： > https://jsfiddle.net/VpkKn/387/ > https://jsfiddle.net/n53qg/ <!DOCTYPE html> <html> &

我和我的朋友正在建立一个网站，展示校园内某些餐厅的菜单。我们正在尝试制作一个单页网站。页面上有两个主要div。其中一个显示餐厅列表，另一个显示餐厅列表中所选餐厅的菜单

关于这一点，网络上有太多的问题，我们尝试了无数的小提琴，但我们无法让它们发挥作用。我们尝试的最后两个小提琴如下：

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

> https://jsfiddle.net/n53qg/

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

我们的网页是：

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

编辑：页面的代码可能看起来有点凌乱，因为我们同时也在学习html。我们对此感到抱歉：）

本页代码汇总如下：

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

> https://jsfiddle.net/n53qg/

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


KalkanlıKeyif
&thinsp；
链接1
链接2
链接3
链接4
链接5
酒吧
A.‎&规则；特莱
伯格城
咖啡日
..... //按钮继续
&thinsp；
多纳泰罗比萨饼
......................

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

因此，这里有一个jfiddle，显示您的站点当前的功能。您是否也需要功能方面的帮助

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

你们应该用AngularJS来做这个网站。它是为这类应用而设计的

您需要在问题中发布代码。你看到了警告，但你认为它不适用于你，所以你突出显示链接作为代码来绕过它。整个页面的代码？你也有一大堆控制台错误。发布一个你自己的JSFIDLE关于你不能得到工作的东西。不是整页。。。