javascript - 一个html页面上多个页面的下拉菜单

Question

我想将多个不同的页面放入一个 html 页面中。我已经有了这方面的代码，但现在我想将页面放入下拉菜单中。例如，使用我提供的代码，我希望 1 成为唯一显示的项目，然后如果您单击它，则会出现一个包含 2 和 3 的下拉菜单。然后一旦选择 2，它就是唯一显示的项目，但是一旦您单击它，会出现一个包含其余项目的下拉菜单。我玩过代码，但我不知道如何将它们放入此下拉菜单中。有没有人有任何解决方案？

编辑:我更愿意在不使用选择框的情况下形成下拉菜单。 我想自定义下拉框，使它看起来更干净并与页面分开，而你不能用选择框来做到这一点。我希望诸如文本居中之类的东西，当您下拉选项时，它们会落在一个没有边框/轮廓的白色框中。

jsfiddle

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("no such element");
        return;
    }
    var pages = document.getElementsByClassName('page');
    for(var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }
    ele.style.display = 'block';
}

span {
    text-decoration:underline;
    color:blue;
    cursor:pointer;
}

<p>Show page <span onclick="show('Page1');">1</span>, <span onclick="show('Page2');">2</span>, <span onclick="show('Page3');">3</span>.
</p>

<div id="Page1" class="page" style="">
    Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
    Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
    Content of page 3
</div>

Answer 1

您可以使用 jquery 执行此操作，使用 on change事件:

$("#drop").on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

span {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.dropStyle {
  width: 100px;
  /*text-indent: 35px;*/
  padding-left: 6%;
  background-color: white;
  /*border:none*/
  border: 1px solid #e0e0e0;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show page
<select id="drop" class="dropStyle">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>