Question

我的项目有一个侧边栏，有四种不同的选项。（时间表，进度，添加课程，下降课程）。

我希望用户能够点击这些选项（扩展侧栏后）并显示他们点击的四个中的任何一个信息。我希望此信息显示在同一页面上，而不是链接到另一页面。

我之前通过隐藏页面和使用showpage函数完成了这项工作。这一次虽然它的编码方式不同。

注意：我现在没有这4个页面的任何数据 - 我只是想设置它们以便它们起作用。

为了简短起见：点击日程安排后，我需要哪些代码以及在何处显示信息（例如：＆＃34;这是您的日程安排＆＃34;）？

<!doctype html>
<html>
<head>

<title>STUDENT SCHEDULER APP</title>

<link rel="stylesheet" type="text/css" href="ssaStyles.css">

<script src="jquery-3.2.1.min.js"></script>

<script>

$(function() {
  console.log("jQuery was loaded");
});

$(document).ready(function() {

  function toggleSidebar() {
    $(".button").toggleClass("active");
    $("main").toggleClass("move-to-left");
    $(".sidebar-item").toggleClass("active");
  }

  $(".button").on("click tap", function() {
    toggleSidebar();
  });

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      toggleSidebar();
    }
  });

  });

    </script>

   </head>

  <body>

<div id="header">
  <h1>Welcome!</h1>
</div>

<div class="nav-right visible-xs">
  <div class="button" id="btn">
   <div class="bar top"></div>
   <div class="bar middle"></div>
   <div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>


  <nav>
    <div class="nav-right hidden-xs">
     <div class="button" id="btn">
    <div class="bar top"></div>
    <div class="bar middle"></div>
    <div class="bar bottom"></div>
    </div>
   </div>
   <!-- nav-right -->
  </nav>


</main>

 <div class="sidebar">
  <ul class="sidebar-list">
   <li class="sidebar-item"><a href="#" class="sidebar-anchor">Schedule</a>
</li>
 <li class="sidebar-item"><a href="#" class="sidebar-anchor">Progress</a>
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Add a course</a>
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a 
course</a></li>
  </ul>
 </div>

 </body>

 </html>

我是初学者。

从侧栏显示同一页面上的信息

0 个答案: