Question

我和我的朋友正在建立一个网站，以显示校园周围某些餐馆的菜单。我们正在努力创建一个单页网站。页面上有两个主要的div。其中一个显示餐馆列表，另一个应该显示餐馆列表中所选餐厅的菜单。

网上有太多关于此事的问题，我们已经尝试了无数的小提琴，但我们无法让它们发挥作用。我们尝试过的最后2个小提琴如下：

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

> https://jsfiddle.net/n53qg/

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

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

编辑：页面代码可能看起来有点乱，因为我们也在同时学习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>

Answer 1

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

所以这里有一个jfiddle，显示您的网站目前的工作。您是否也希望获得有关该功能的帮助？

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

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

http://jsfiddle.net/jz3pLL22/

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

单击按钮

1 个答案: