一个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>