不使用 select 框创建下拉菜单

Question

我想将多个不同的页面合并到一个 html 页面中。我在下拉列表中有每个页面选项，然后当您 select 该项目时，该项目的内容就会出现。现在我正在为下拉菜单使用 select 框，但是我是否可以在不使用 select 的情况下为此创建一个下拉菜单？如果您使用 select 框，我想向下拉列表中添加您无法执行的自定义设置。 **我希望下拉列表仍然包括我所有不同的页面

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

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

好的，我假设您不喜欢 tabs 解决方案，所以让我们坚持您的样式下拉目标。

我只是建议您安装一个 jquery 库，它可以为您完成所有艰苦的工作。我实际上拿了你的 select 框并使其可主题化。您可以找到我的 googling it, but i personnaly like this one.

中的许多选项

编辑：这是我的 jsfiddle 答案 https://jsfiddle.net/1m05ubwc/2/

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

Answer 2

$('.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>

Answer 3

这是一些示例版本；]

$('.options li').on('click', function() {
  $('.selected').html( $(this).text() );
  $('.selected-inp').val( $(this).data('value') ).trigger('change');
  $('.options').removeClass('show');
});

$('.selected').on('click', function() {
  $('.options').toggleClass('show');
});

$('.selected-inp').on('change', function(ev) {
  $('.result').html('The new value is: ' + ev.target.value);
});

.dropdown {
   position: relative;
  height: 30px;
}
.selected {
  width: 100px;
  border: 1px solid #eee;
  padding: 6px 10px;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100px;
  bottom: -50px;
  left: 0;
  display: none;
  border: 1px solid #eee;
  border-top: none;
  list-style: none;
  margin: 0;
  padding:0;
}
.options.show {
  display: block;
}

.options li {
  background: #eee;
  cursor: pointer;
  padding: 3px;
}
.options li:hover {
  background: #ccc;
}
.result { margin-top: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="selected">Select value</div>
  <input class="selected-inp" type="hidden">
  <ul class="options">
    <li data-value="1">Opt 1</li>
    <li data-value="2">Opt 2</li>
  </ul>
</div>
<div class="result"></div>

Answer 4

这与您提供的图片相似。用于区分事物的背景色。

$("span").html("Page: 1");
$("#Page1").show();

$("li").on('click', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
    $("span").html("Page: " + value);
  }
});

ul{
  display: none;
  margin: 0;
  padding: 0;
  background-color: pink;
  position: absolute;
  width: 75px;
}

.page{
  display:none;
}

#drop:hover > ul{
  display: block;
}

#drop{
  background-color: lightgreen;
  width: 75px;
  text-align:center;
}

li{
  list-style: none;
  text-align: center;
}

li:hover{
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>  
  </ul>
</div>

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

不使用 select 框创建下拉菜单

Creating a dropdown without using a select box

javascript

jquery

html

css