Question

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

编辑：我更喜欢在不使用选择框的情况下形成下拉菜单。我想自定义下拉框，使其看起来更干净，页面分开，你不能用选择框做到这一点。我希望文本居中等等，当你选择下拉菜单时，它们会在一个没有边框/轮廓的白色框中下拉。

jsfiddle

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: