Question

所以我有这个标签设置，就像桌面上的点击链接一样，但在平板电脑和手机中，我需要它是一个具有相同功能的选择下拉列表。

以下是桌面上链接的代码：

jQuery(document).ready(function($) {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active-tab').siblings().removeClass('active-tab');

        e.preventDefault();
    });

这很完美，现在这就是我对select标签的作用：

$('.tabs .tab-select select').on('change', function(e)    {  
    var currentAttrValue = $(this).attr('option');

    $('.tabs ' + currentAttrValue).show().siblings().hide();

});

如何让select标签代码生效？

Answer 1

首先，您不需要执行$('.tabs .tab-select select')（这意味着选择.tab选择的子标记的选择标记），因为select您正在使用的元素本身具有.tab-select类。

其次，$(this).attr('option')在您的更改处理程序中未定义，因为它引用了select元素本身中的select 属性（没有HTML标记具有select属性）。

解决方法：要获取选中的当前选项，您应该使用jQuery's :selected Selector，并连接该选项标签的 ID的值（或文本）：

$('.tabs .tab-select').on('change', function(e){
       var currentOption = $('#' + $(this).attr('id') + ' option:selected').text();
       $('#tab' + currentOption).show().siblings().hide();
});

<强> JSfiddle

Answer 2

它在JS Fiddle中运行得很好，但是当我将它添加到整个JQuery时它不起作用

    jQuery(document).ready(function($) {
       $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

         ////Show/Hide Tabs
       $('.tabs ' + currentAttrValue).show().siblings().hide();

     ////Change/remove current tab to active
    $(this).parent('li').addClass('active-tab').siblings().removeClass('active-tab');

    e.preventDefault();
});////desktop

$('.tabs .tab-select').on('change', function(e){
       var currentOption = $('#' + $(this).attr('id') + ' option:selected').text();
       $('#tab' + currentOption).show().siblings().hide();

});////mobile

}）; //// JQuery块的结尾

获取Select Tag作为JQuery中的on click函数

2 个答案: