在不使用选择框的情况下创建下拉列表

Question

我想将多个不同的页面放入一个html页面。我在下拉列表中有每个页面选项，然后当您选择项目时，该项目的内容将显示。现在我使用选择框进行下拉菜单，但无论如何我可以在不使用选择的情况下为此进行下拉菜单吗？如果您使用的是选择框，我想在下拉菜单中添加自定义项。 **我希望下拉列表仍然包含我所有的独特页面

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

jsfiddle - https://jsfiddle.net/

＆＃13;

＆＃13;

public class ScaledPoint extends Point {
    public ScaledPoint (double[] points, double scale) {
        super(points[0] * scale, points[1] * scale);
    }
}

＆＃13;

Mat originalObject; 
// TODO: populate the original object
Mat scaledObject; 
// TODO: populate the scaled object
double scaleFactor = scaledObject.getHeight()/(double)originalObject.getHeight();
matOfSomePoints = new Mat(4,1, CvType.CV_23FC2);
// TODO: populate the above matrix with your points
Point aPointForTheUnscaledImage = new Point(matOfSomePoints.get(0,0));
Point aPointForTheScaledImage = new ScaledPoint(matOfSomePoints.get(0,0), scaleFactor);

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

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

我只是建议您安装一个jquery库，为您完成所有艰苦的工作。 Il实际上拿走你的选择框并使其成为可能的。您可以找到我的googling许多选项，但我个人喜欢one。

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

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

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

这与您提供的图片类似。背景颜色用于使事物分明。

＆＃13;

＆＃13;

$("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);
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;