使用下拉而不是鏈接創建jQuery選項卡

我試圖創建由下拉菜單控制的選項卡式內容。我正在使用「更改」事件，但由於某種原因，這並未發生。任何想法，我要去錯了嗎？使用下拉而不是鏈接創建jQuery選項卡

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/

來源

2013-10-05 user1444027

第一負荷的jQuery（在撥弄你已經在框架選項中選擇純爵士）
$('select.tabs option') sho ULD是 $('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

來源

2013-10-05 11:03:58 xyz

謝謝我已經更新了小提琴。「當前」類現在在進行更改時消失，但不會將其添加到新選項和div中。它只是添加'當前'類來選擇（而不是選項）。 – user1444027

@ user1444027：我已經更新了我的答案。 – xyz

太好了，謝謝你的完美！ – user1444027

使用下拉而不是鏈接創建jQuery選項卡

回答

相關問題