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

Question

I've been messing around with bootstrap, jquery, javascript and html for some time now and I still find it rather difficult considering the way that pages, navigation and etc works. 一段时间以来，我一直在使用引导程序，jQuery，JavaScript和html，但考虑到页面，导航等的工作方式，我仍然发现它相当困难。 One thing in particular that I've had some trouble finding answers for is the best way/practice to build a page..? 特别是我在寻找答案时遇到一些麻烦，这是构建页面的最佳方法/做法。

I've tried the following for my page, but I always find something that doesn't quite work as I expect it to. 我已经为我的页面尝试了以下内容，但是我总是发现某些功能并没有达到我的预期。

Creating an "empty" (containing empty divs) index page and using javascript to load external pages (Problem: I can't seem to use the id's or classes of the elements in the external page anymore with this approach) 创建一个“空”（包含空divs）索引页并使用javascript加载外部页面（问题：通过这种方法，我似乎无法再使用外部页面中元素的id或类）
Creating a single index.html page containing all my divs and hiding/showing whatever I need to (Problem: Quickly becomes very hard to find around in which are showing/hiding and adding stuff can become quite tricky 创建一个包含所有div的单个index.html页并隐藏/显示所需的内容（问题：很快很难找到显示/隐藏和添加内容的地方，这会变得非常棘手
Creating a single html file for all the "pages" I need (Problem: I can't seem to transfer my javascript vars from one page to another. The vars become empty on loading a new page using href) 为我需要的所有“页面”创建一个单独的html文件（问题：我似乎无法将我的JavaScript变量从一个页面转移到另一页面。使用href加载新页面时，变量变成空的）

Index.html 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 NB

The content consists of two dropdowns. 内容包括两个下拉菜单。 On the page load I only want to show the first one. 在页面加载中，我只想显示第一个。 Then once the user selects something from that dropdown I want to show which he selected in a heading and show the second dropdown as well. 然后，一旦用户从该下拉菜单中选择了某个内容，我想显示其在标题中选择的内容，并同时显示第二个下拉菜单。 Once the second one has been selected too I want to display the selection in a heading and show a button that "navigates the user to a new page". 一旦选择了第二个，我也想在标题中显示选择并显示一个“将用户导航到新页面”的按钮。 However what's really import is that I want to "save" the name of the dropdowns that the user selected to use as some sort of feedback.´ 但是，真正重要的是，我想“保存”用户选择用作某种反馈的下拉列表的名称。

Functions.js 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

It seems like what you want to create is a Single Page Application . 似乎要创建的是单页应用程序。

Your high level requirements will be: 您的高级要求将是：

Loading and destroying parts of pages (aka modules) dynamically. 动态加载和销毁部分页面（即模块）。
State transitions to cover various use cases. 状态转换以涵盖各种用例。
Dynamically bind and update the state based on user input like click . 根据用户输入（如click动态绑定和更新状态。

While you can surely code your own solution using jQuery, Bootstrap etc I would highly recommend using a MV* framework for creating such a single page application. 虽然您可以肯定地使用jQuery，Bootstrap等编写自己的解决方案，但我强烈建议您使用MV *框架来创建这样的单页应用程序。 There are many popular ones like Angular, Ember, Backbone etc that make the process much more easier. 有许多流行的应用程序，例如Angular，Ember，Backbone等，使该过程更加容易。 React can also be a good view component. React也是一个很好的视图组件。

These frameworks provide many features that will make the task of creating dynamic web applications easier. 这些框架提供了许多功能，这些功能将使创建动态Web应用程序的任务更加容易。

I know this is not the exact answer you were looking for, but I hope this answer could guide you towards the right approach that will be easier to implement and maintain in the long term. 我知道这不是您要找的确切答案，但是我希望这个答案可以指导您采用正确的方法，从长远来看，该方法更易于实施和维护。

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

问题描述

Index.html Index.html

NB NB

Functions.js Functions.js

1 个解决方案

解决方案1
1 已采纳 2016-03-09 17:43:36

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

问题描述

Index.html Index.html

NB NB

Functions.js Functions.js

1 个解决方案

解决方案1 1 已采纳 2016-03-09 17:43:36

解决方案1
1 已采纳 2016-03-09 17:43:36