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

首先加载jQuery（你在框架选项中选择了Pure Js）
$('select.tabs option')应该是 $('select.tabs')

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

使用下拉菜单而不是链接创建jQuery选项卡

1 个答案: