jquery - 使用下拉而不是链接创建 jQuery 选项卡

Question

我正在尝试创建由下拉菜单控制的选项卡式内容。我正在使用“更改”事件，但由于某种原因它没有发生。有什么想法我哪里出错了吗？

HTML：

<select class="tabs" >
    <option class="tab-link current" data-tab="tab-1">Tab 1</option>
    <option class="tab-link" data-tab="tab-2">Tab 2</option>
    <option class="tab-link" data-tab="tab-3">Tab 3</option>
    <option class="tab-link" data-tab="tab-4">Tab 4</option>
</select>

<div id="tab-1" class="tab-content current">
    Tab one content.
</div>
<div id="tab-2" class="tab-content">
    Tab two content.
</div>
<div id="tab-3" class="tab-content">
    Tab three content.
</div>
<div id="tab-4" class="tab-content">
    Tab four content.
</div>

jQuery：

$('select.tabs option').change(function(){
        var tab_id = $(this).attr('data-tab');

        $('select.tabs option').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

这是一个 jsfidde：http: //jsfiddle.net/85V3D/

Answer 1

1. 首先加载 jQuery（在小提琴中你选择了 Pure Js in frameworks 选项）
2. $('select.tabs option')应该 $('select.tabs')
3. thisin changefunction 指的是select元素（而不是选定的选项元素），因此var tab_id = $(this).attr('data-tab');返回undefined

要获取选定option元素（不是选定值），请使用

$('select.tabs').change(function () {
    var option = this.options[this.selectedIndex];
    alert($(option).attr('data-tab'));
})

这是工作小提琴