使用bootstrap，jquery和javascript创建一个动态主页

Using bootstrap, jquery and javascript to create a dynamic homepage

本文关键字：一个主页动态创建 bootstrap jquery javascript 使用更新时间：2023-09-26

我一直在搞弄bootstrap，jquery，javascript和html一段时间了，考虑到页面，导航等的工作方式，我仍然发现这相当困难。我在寻找答案时遇到的一件事是构建页面的最佳方法/实践..？

我已经为我的页面尝试了以下内容，但我总是发现一些不太像我预期的那样工作的东西。

创建一个"空"（包含空div）索引页面并使用javascript加载外部页面（问题：我似乎不能再使用这种方法使用外部页面中元素的id或类）
创建一个包含我所有div的单个索引.html页面，并隐藏/显示我需要的任何内容（问题：很快变得很难找到显示/隐藏的内容，添加内容可能会变得非常棘手
为我需要的所有"页面"创建一个 html 文件（问题：我似乎无法将我的 javascript 变量从一个页面转移到另一个页面。变量在使用 href 加载新页面时变为空）

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Course Suggestion Tool</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/functions.js"></script>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="css/custom_style.css" rel="stylesheet">
</head>
<body class="ui-mobile-viewport ui-overlay-c">
<div class="container" id="first">
  <div id="study_area">
    <fieldset>
    <legend>Study</legend>
    <div class="dropdown" id="study_dropdown">
      <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#" class="dme" data-value="action-1" id="dme">Digital Media Engineering</a>
        </li>
      </ul>
    </div>
    <div>
      <h4 id="study_choice">Study choice</h4>
    </div>
  </fieldset>
  </div>
  <div id="focus_area">
    <fieldset>
      <legend>Focus Area</legend>
      <div class="dropdown" id="focus_dropdown">
        <button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#" id="smaa">Social media and apps</a></li>
          <li><a href="#" id="uxue">UX User experience</a></li>
          <li><a href="#" id="ds">Data science</a></li>
          <li><a href="#" id="cga">Computer games</a></li>
          <li><a href="#" id="cgr">Computer graphics</a></li>
        </ul>
      </div>
      <h4 id="focus_choice">Focus Choice</h4>
    </fieldset>
  </div>
  <button id="next_page" type="button" class="btn btn-primary">Something exciting</button>
</div>
<div class="container" id="second">
</div>
</body>
</html>

铌

内容由两个下拉列表组成。在页面加载中，我只想显示第一个。然后，一旦用户从该下拉列表中选择了一些内容，我想显示他在标题中选择的内容，并显示第二个下拉列表。一旦选择了第二个，我想在标题中显示选择并显示一个"将用户导航到新页面"的按钮。然而，真正重要的是，我想"保存"用户选择用作某种反馈的下拉列表的名称。

功能.js

var selection = {};
$(document).ready(function(){
  $("#focus_area").addClass("collapse");
  $("#study_choice").hide();
  $("#focus_choice").hide();
  $("#next_page").hide();
  $(".dme").click(function() {
    $("#study_dropdown").hide()
    var choiceText = $("#dme").text()
    selection.study = choiceText;
    $("#study_choice").text(choiceText)
    $("#study_choice").show()
    $("#focus_area").slideDown();
  });
  $("#smaa").click(function() {
    $("#focus_dropdown").hide();
    var choiceText = $("#smaa").text();
    selection.focus = choiceText;
    $("#focus_choice").text(choiceText);
    $("#focus_choice").show();
    $("#next_page").slideDown();
  });
  $("#uxue").click(function(){
    $("#focus_dropdown").hide();
    var choiceText = $("#uxue").text();
    selection.focus = choiceText;
    $("#focus_choice").text(choiceText);
    $("#focus_choice").show();
    $("#next_page").slideDown();
  });
  $("#ds").click(function(){
    $("#focus_dropdown").hide();
    var choiceText = $("#ds").text();
    selection.focus = choiceText;
    $("#focus_choice").text(choiceText);
    $("#focus_choice").show();
    $("#next_page").slideDown();
  });
  $("#cga").click(function(){
    $("#focus_dropdown").hide();
    var choiceText = $("#cga").text();
    selection.focus = choiceText;
    $("#focus_choice").text(choiceText);
    $("#focus_choice").show();
    $("#next_page").slideDown();
  });
  $("#cgr").click(function(){
    $("#focus_dropdown").hide();
    var choiceText = $("#cgr").text();
    selection.focus = choiceText;
    console.log(selection);
    $("#focus_choice").text(choiceText);
    $("#focus_choice").show();
    $("#next_page").slideDown();
  });
  $("#next_page").click(function() {
    $("#first").load();
    $("#second").load("planner.html") //External html page (currently empty)
  });

}）;

似乎您要创建的是一个单页应用程序。

您的高级要求将是：

动态加载和销毁页面的某些部分（也称为模块）。
状态转换以涵盖各种用例。
用户输入动态绑定和更新状态，如click。

虽然您肯定可以使用jQuery，Bootstrap等编写自己的解决方案，但我强烈建议使用MV*框架来创建这样的单页应用程序。有许多流行的，如Angular，Ember，Backbone等，使过程变得更加容易。React 也可以是一个很好的视图组件。

这些框架提供了许多功能，这些功能将使创建动态 Web 应用程序的任务更容易。

我知道这不是您正在寻找的确切答案，但我希望这个答案可以指导您找到正确的方法，从长远来看，这种方法更容易实施和维护。