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>

Answer 1

要做的真的很简单，就是创建部分，这些部分将链接到您的链接，让我向您展示如何操作。

<html>
 <head>
   <title>Example</title>
 </head>
 <body>

<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
   <a href="#about">About</a>
   <a href="#contact">Contact</a>
</div>  

<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
   <div id="about">
       <h1>Hello</h1>
   </div>   

<!--this is the contact section-->
   <div id="contact">
       <p> done</p>
   </div>

</body>
</html>

您提供的链接名称应与div id名称相同，如果需要，您将必须禁用CSS溢出。...希望它有意义，如果您需要更多帮助，请询问。 / p>

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

1 个答案: