如何使用jquery选项卡重定向到另一个网页?

时间:2018-05-24 14:24:29

标签: jquery redirect

我在下面看到以下代码。

我想使用标签链接到Google。使用jQuery标签时这是不可能的吗?

<!DOCTYPE html>
<html>
<head>
</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>
<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();
});
</script>
</body>
</html>  

当我点击标签时谷歌没有任何反应。我需要代码来#34;突破&#34; jQuery选项卡,并在单击Google标签页时显示Google页面。

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Account</a></li>
        <li><a href="#tabs-2">Settings</a></li>
        <li id='googleTab'><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>
<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('#googleTab').click(function(){
 window.location.href = "http://www.google.com";
});
});
</script>
</body>
</html>