通过选择框加载 Ajax 选项卡

Question

我有这个来自http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html 的非常有用的 jquery 脚本，它通过 ajax 将内容加载到目标 div 中。如你看到的。它是为使用包含 href 属性的标签而编写的。现在我想稍微扩展一下功能，并允许在下拉菜单中选择适当的选项时将页面加载到目标 div 上。虽然我得到了大部分代码，但我对 javascript 还是很陌生。

这是脚本

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function(){
    // Preload tab on page load
    if($(tabsId + ' li.current a').length > 0){
        loadTab($(tabsId + ' li.current a'));
    }

    $(tabsId + ' a').click(function(){
        if($(this).parent().hasClass('current')){ return false; }

        $(tabsId + ' li.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));       
        return false;
    });
});

function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');

    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}

HTML

    <ul class="ajaxtabs" id="tabs">
        <li class="current"><a href="./music-list.html">Videos</a></li>
        <li><a href="./tab-2.html">Audio</a></li>
        <li class="third-child"><a href="./tab-3.html">Texte</a></li>
        <li>
            <form id="vod_select_nav">
              <select id="standard-dropdown" name="standard-dropdown" class="bigbox" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                <option value="index.php?id=48/#" class="test-class-1">NAVIGUER PAR SERIES &amp; EPISODES</option>
                <option value="./tab-2.html">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Alume La Lampe</option>
            <option value="index.php?id=91">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; State Of The Church</option>
            <option value="index.php?id=97">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Non Le Feu Ne S'eteindra&#8230;</option>
              </select>
            </form> 
        </li>
    </ul>
    <div class="ajaxtabs-container" id="tabs-container">
        Loading. Please Wait...
    </div>

html 包含用于导航到不带 ajax 的不同文件的选择框

我知道解决方案将取决于修改这部分并从选择框内联调用函数

$(containerId).load(tabObj.attr('href'), function(){
    $(containerId).removeClass('loading');
    $(containerId).fadeIn('fast');
});

根据 jquery API @http://api.jquery.com/attr/ 我知道我可以这样做：

$(containerId).load(tabObj.attr('onchange'), function(){
    $(containerId).removeClass('loading');
    $(containerId).fadeIn('fast');
});

但我知道这是错误的，因为这里唯一改变的是属性。

任何帮助将不胜感激

Answer 1

而不是$(tabsId + ' a').click()，绑定下拉列表的change 事件。您将获得下拉项作为参数，您可以读取其值并导航到所需的页面。

这将为您提供与所选项目关联的值

$('#standard-dropdown').change(function (item) {
    alert($('#standard-dropdown').val());

});