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的不同文件的选择框

我知道解决方案将取决于修改此部分并从selectbox中调用内联函数

$(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());

});

通过Selectbox加载Ajax选项卡

1 个答案: