在jQuery选项卡脚本中通过url定义所选选项卡

Defining selected tab by url in jQuery tab script

本文关键字：选项 url 定义 jQuery 脚本      更新时间：2023-09-26

我有一个jQuery搜索脚本，它使用选项卡为用户定义他们想要使用的搜索类型。当用户进行搜索时，会创建一个类似于#类型/查询/的URL。如果URL中有#type，则与该类型对应的选项卡将被选中。但是，如果查询也在url中(#类型/query/)，则不选择选项卡。使用下面的代码，我如何使它忽略/查询/之后的所有内容?我希望你能理解我所描述的。

我的jQuery脚本是: 
$(document).ready(function () {
    $('[id^=type_]').click(function () {
        type = this.id.replace('type_', '');
        $('[id^=type_]').removeClass('selected');
        $('#type_' + type).addClass('selected');
        return false;
    });
    if (window.location.hash != "") {
        url = window.location.hash.replace('#', '');
        $('#type_' + url).click();
    } else {
        $('#type_search').click();
    }
    $('#query').keyup(function () {
        var query = $(this).val();
        var url = '/' + type + '/' + query + '/';
        window.location.hash = '' + type + '/' + query + '/';
        document.title = $(this).val() + ' - My Search';
        $('#results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search';
            $('#results').hide();
        }
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('#results').html(results);
            }
        });
    });
    var textlength = $('#query').val().length;
    if (textlength <= 0) {
        $('#query').focus();
    } else {
        $('#query').blur();
    }
});

我想出的稍微笨拙的方法是:

$('a').each(
    function(){
        var url = this.href;
        var hashAt = url.indexOf('#');
        var nextSlashAt = url.indexOf('/',hashAt);
        var url = url.substring(0,nextSlashAt);
        var tab = url.substring(hashAt);
        $(this).text(url + " (" + tab + ").");
    });

JS Fiddle demo.

显然，不是遍历a元素，而是将url变量分配给window.location;，但从那时起，我认为它应该很容易适应您的需求。

引用:

  • indexOf() .
  • substring() .
相关文章：