使用下拉而不是链接创建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 (在小提琴中，您选择了框架中的纯Js选项)
2. $('select.tabs option')应该是$('select.tabs')
3. this在change函数中是指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'));
})

这是working fiddle