简体   繁体   English

点击选项卡打开一个新网页

[英]open a new webpage on click of tab

here is my code .. i want to open facebook when i click on second tab ie tab2 这是我的代码..当我单击第二个选项卡即tab2时,我想打开facebook

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();

return false;
    });

});
</script>
</head> 

<body> 

<div class="container"> 
    <ul class="tabs"> 
        <li><a href="#tab1">tab1</a></li> 
        <li><a href="#tab2">tab2</a></li> 
        <li><a href="#tab3">tab3</a></li> 
        <li><a href="#tab4">tab4</a></li> 
    </ul> 
        <div class="tab_container"> 
        <div id="tab1" class="tab_content"> 


    <p>No Data Available</p>
    </div> 

    <div id="tab2" class="tab_content" > 

    </div> 

    <div id="tab3" class="tab_content"> 

        </div> 
        <div id="tab4" class="tab_content"> 
        </div> 
    </div> 
</div> 


</body> 
</html>

How about: 怎么样:

<li><a href="http://facebook.com">tab2</a></li> 

Though I will say making a tab a link is highly unintuitive and not good UI practice. 尽管我会说将选项卡链接起来是非常不直观的,而且也不是很好的UI习惯。

Change 更改

<li><a href="#tab2">tab2</a></li> 

to

<li><a href="http://www.facebook.com">tab2</a></li> 

然后像这样将href='http://www.facebook.com'为tag2:

<li><a href="http://www.facebook.com">tab2</a></li> 

You need to exclude the Facebook link from the click event so that you can use a normal link in its place. 您需要从click事件中排除Facebook链接,以便可以在其位置使用普通链接。

Change the click event code to: 将点击事件代码更改为:

$("ul.tabs li:not(.external)").click(function() { 
    ...

and the tab that should open Facebook to 和应该打开Facebook的选项卡

<li class="external"><a href="http://www.facebook.com">tab2</a></li> 

Demo: http://jsfiddle.net/eBHa5/ 演示: http//jsfiddle.net/eBHa5/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM