如何通过jQuery Tab跳转到外部网页？

嘿，这个问题我熟！核心原因是jQuery UI的Tabs组件会默认拦截所有标签页锚点的点击事件，不管你写的是内部锚点还是外部URL，它都会把点击当成内部标签页的切换操作来处理，所以直接放Google的链接自然没反应。

下面给你两种靠谱的修改方案，按需选就行：

方案1：拦截点击，手动处理外部链接 #

我们可以给Tabs里的锚点加个点击监听，判断如果是外部URL（不是以#开头的），就先阻止Tabs的默认切换行为，然后跳转到目标地址——你可以选当前窗口打开，或者新窗口打开。

修改后的JS代码是这样的：

jQuery(document).ready(function(){
    jQuery('#tabs').tabs();
    jQuery('#tabs1').tabs();
    jQuery('#tabs2').tabs();

    // 处理外部链接的点击事件
    jQuery('#tabs ul li a').on('click', function(e){
        var linkHref = jQuery(this).attr('href');
        // 检查是不是外部链接（不是内部锚点）
        if (linkHref.indexOf('#') !== 0) {
            e.preventDefault(); // 阻止Tabs默认的切换逻辑
            window.location.href = linkHref; // 当前窗口打开Google
            // 要是想新窗口打开，就换成这句：
            // window.open(linkHref, '_blank');
        }
    });
});

方案2：加target="_blank"并阻止默认行为 #

如果你本来就想在新窗口打开Google，那可以直接给链接加target="_blank"，再通过事件阻止Tabs的默认处理，这样更直接：

首先改HTML里的Google链接：

<li><a href="https://www.google.com" target="_blank">Google</a></li>

然后添加对应的事件监听：

jQuery(document).ready(function(){
    jQuery('#tabs').tabs();
    jQuery('#tabs1').tabs();
    jQuery('#tabs2').tabs();

    // 针对带target="_blank"的链接做处理
    jQuery('#tabs ul li a[target="_blank"]').on('click', function(e){
        e.preventDefault(); // 不让Tabs把它当成内部标签
        window.open(jQuery(this).attr('href'), '_blank');
    });
});

完整可运行代码 #

下面是整合了方案1（当前窗口打开）的完整代码，直接复制就能用：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        jQuery(document).ready(function(){
            jQuery('#tabs').tabs();
            jQuery('#tabs1').tabs();
            jQuery('#tabs2').tabs();

            // 处理外部链接跳转
            jQuery('#tabs ul li a').on('click', function(e){
                var linkHref = jQuery(this).attr('href');
                if (linkHref.indexOf('#') !== 0) {
                    e.preventDefault();
                    window.location.href = linkHref;
                    // 新窗口打开请替换为：window.open(linkHref, '_blank');
                }
            });
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Account</a></li>
            <li><a href="#tabs-2">Settings</a></li>
            <li><a href="https://www.google.com">Google</a></li>
        </ul>
        <!-- ACCOUNT -->
        <div id="tabs-1">
            <div id="tabs1">
                <ul>
                    <li><a href="#tabs-11">Edit</a></li>
                </ul>
                <div id="tabs-11">
                    <p>Content here...</p>
                </div>
            </div>
        </div>
        <!-- SETTINGS -->
        <div id="tabs-2">
            <div id="tabs2">
                <ul>
                    <li><a href="#tabs-21">Edit</a></li>
                </ul>
                <div id="tabs-21">
                    <p>Content here...</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这样改完之后，点击Google标签页就能正常跳转到目标页面啦～

内容的提问来源于stack exchange，提问作者J. Doe