javascript - 选择器面板，Javascript

Question

    $('#select-page').bind('change', function(){
        alert('hi!');
    });

        <select id="select-page">
          <option value="hi">Page 1</option>
          <option value="hi2">Page 2</option>
           <!-- the amount of options in here varies all the time -->
        </select>

你好，

我正在尝试制作一个选项卡切换面板类型的功能，除了选项卡，我想使用选择下拉菜单在面板（div）之间切换。

我怎样才能做到这一点？（我正在使用 jQuery 库）。

祝你有美好的一天

Answer 1

你可以尝试这样的事情。

html

<select id="select-page">
    <option value="#hi">Page 1</option> <!--Set the options id of the div/panel to be displayed-->
    <option value="#hi2">Page 2</option>
    <option value="#hi3">Page 3</option>
    <option value="#hi4">Page 4</option>
    <!-- the amount of options in here varies -->
</select>
<div class="content" id="hi">Content1</div>
<div class="content" id="hi2">Content2</div>
<div class="content" id="hi3">Content3</div>
<div class="content" id="hi4">Content4</div>

JS

$(function(){
    $('.content').eq(0).show(); //show the first item as default
    $('#select-page').bind('change', function () {
        $('.content').slideUp(); //slide up everything.You can also use .hide() insetad of slideUp().
        $(this.value).slideDown(); //slide down the one respective to this option. You can also use .show() instead of slideDown()
    });
});

对于这种简单的布局，您可以使用链接并过滤到仅一个语句。

$('#select-page').bind('change', function () {
    $('.content').slideUp().filter(this.value).slideDown();
});

演示

一些参考资料

slideDown , slideUp , 显示, 隐藏, 过滤