的index.html

Question

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

我已经为我的页面尝试过以下操作，但我总能找到一些不太合适的东西。

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

的index.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>

NB

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

Functions.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)
  });

}）;

Answer 1

您想要创建的内容似乎是Single Page Application。

您的高级要求将是：

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

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

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

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

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

的index.html

NB

Functions.js

1 个答案: