Javascript 在同一页面上显示侧边栏中的信息_Javascript_Jquery_Html

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

javascript jquery html

Javascript 在同一页面上显示侧边栏中的信息,javascript,jquery,html,Javascript,Jquery,Html,我是这方面的初学者，现在我正在做一个项目。为了保持简单，我的项目现在有一个侧栏，有四个不同的选项。（计划、进度、添加课程、删除课程）。我希望用户能够点击这个选项（在展开侧栏之后），并显示他们点击的四个选项中的哪一个的信息。我希望此信息显示在同一页上，而不是链接到另一页。我以前通过使用不可见页面和showpage函数来实现这一点。这一次，虽然它与类的编码不同，但我不知道如何进行。感谢您的帮助注意：我现在没有这4个页面的任何数据-我只想设置它，让它们现在就可以运行。简而言之：我在询问我需要什么代码

我是这方面的初学者，现在我正在做一个项目。为了保持简单，我的项目现在有一个侧栏，有四个不同的选项。（计划、进度、添加课程、删除课程）。我希望用户能够点击这个选项（在展开侧栏之后），并显示他们点击的四个选项中的哪一个的信息。我希望此信息显示在同一页上，而不是链接到另一页。我以前通过使用不可见页面和showpage函数来实现这一点。这一次，虽然它与类的编码不同，但我不知道如何进行。感谢您的帮助

注意：我现在没有这4个页面的任何数据-我只想设置它，让它们现在就可以运行。简而言之：我在询问我需要什么代码，以及在单击日程安排时在同一页面的何处显示信息（例如：“这是您的日程安排”）

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


学生调度器应用程序
$（函数（）{
log（“jQuery已加载”）；
});
$（文档）.ready（函数（）{
函数toggleSidebar（）{
$（“.button”）.toggleClass（“活动”）；
$（“主”）.toggleClass（“向左移动”）；
$（“.sidebar项”）.toggleClass（“活动”）；
}
$（“.button”）。在（“点击”，函数（）{
切换侧边栏（）；
});
$（文档）.keyup（函数（e）{
如果（例如keyCode===27）{
切换侧边栏（）；
}
});
});
欢迎

非常简单，您只需创建部分，这些部分将链接到您的链接，让我演示如何创建

<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中的溢出功能……希望这是有意义的，如果您需要更多帮助，请询问。

这非常简单，您只需创建节，这些节将链接到您的链接，让我告诉您如何创建

<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中的溢出功能…希望这有意义，如果您需要更多帮助，请询问。

。。。应该显示的内容在哪里？您希望它显示在哪里？现在没有内容。但让我们假设在日程表按钮下，我希望“这是你的日程表…”出现，现在。我希望它显示在欢迎横幅下的同一页上。所以。。。应该显示的内容在哪里？您希望它显示在哪里？现在没有内容。但让我们假设在日程表按钮下，我希望“这是你的日程表…”出现，现在。我希望它显示在欢迎横幅下的同一页上。