javascript - 不使用选择框创建下拉列表

Question

我想将多个不同的页面放入一个 html 页面中。我在下拉列表中有每个页面选项，然后当您选择该元素时，该元素的内容就会出现。现在我正在为下拉列表使用一个选择框，但是无论如何我可以在不使用选择的情况下为此创建一个下拉列表吗？如果您使用的是选择框，我想将自定义添加到您无法执行的下拉列表中。 **我希望下拉列表仍包含我所有不同的页面

这就是我试图让下拉菜单看起来像的东西。居中，当下拉菜单出现时没有边框，背景是白色的，所以它看起来像是页面的一部分。我想更改所有元素的字体等。

jsfiddle - https://jsfiddle.net/

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drop">
  <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>

Answer 1

$('.selectbox__selected').click(function() {
  $('.selectbox__values').toggle();
});

$('.selectbox__item').click(function() {
  var value = $(this).text();
  
  $('.selectbox__selected').attr('data-value', value);
  $('.selectbox__selected').html(value);
  
  $('.selectbox__values').toggle();
});

* {
  box-sizing: border-box;
  margin: 0;
}

.selectbox {
  position: relative;
  width: 200px;
  height: 30px;
}

.selectbox__selected {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  text-align: center;
}

.selectbox__values {
  position: absolute;
  top: 30px;
  width: 200px;
  display: none;
  text-align: center;
}

.selectbox__item {
  padding: 5px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox">
  <div class="selectbox__selected" data-value="value 0">value 0</div>
  <div class="selectbox__values">
    <div class="selectbox__item" data-value="value 1">value 1</div>
    <div class="selectbox__item" data-value="other value 2">oteher value 2</div>
    <div class="selectbox__item" data-value="another value 3">another value 3</div>
  </div>
</div>