javascript - 如何使用选项卡外部的链接浏览 jquery 选项卡

Question

我整天都在搜索和调整以解决这个问题。我在整个 stackoverflow 论坛中搜索了适合我情况的解决方案。

我的主页上有 5 个选项卡。我想使用选项卡外部的链接跳转到并打开所需的选项卡。当我单击 Tab2 时，它会跳转到页面顶部，但不会打开 tab2，它会保留在 tab1 (“主页”选项卡)上。如何解决这个问题？

链接到特定选项卡:

<a href="#" goto="tab2">Tab2</a> 

HTML 代码:

<div id="tabContaier">

    <ul>
        <li><a class="active" href="#tab1">HOME</a></li>
        <li><a href="#tab2">SERVICES</a></li>
        <li><a href="#tab3">OPTIONS</a></li>
            <li><a href="#tab4">ABOUT US</a></li>
            <li><a href="#tab5">CONTACT US</a></li>
    </ul><!-- //Tab buttons -->

    <div class="tabDetails">
        <div id="tab1" class="tabContents">
                <h1>Title1</h1>
                <iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab1 -->
        <div id="tab2" class="tabContents">
                <h1>Title2  </h1>
                <h2>  </h2>
                <h3>  </h3>
                <iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab2 -->
        <div id="tab3" class="tabContents">
               <h1>Title3</h1>
               <iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab3 -->
        <div id="tab4" class="tabContents">
            <h1>Title4 </h1>
            <iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab4 -->
        <div id="tab5" class="tabContents">
            <h1>Title5</h1>
           <iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab5 -->
    </div><!-- //tab Details -->
</div><!-- //Tab Container -->

CSS:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}

body{

    font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}

#tabContaier{
    background:#f0f0f0;
    border:1x solid #fff;
    margin:100px auto;
    padding:20px;
    position:absolute;
    width:1315px;
}
    #tabContaier ul{
        overflow:hidden;
        border-left:0px solid #fff;
        height:80px;
        position:center;
        z-index:100;
    }
    #tabContaier li{
        float:left;
        list-style:none;
    }
    #tabContaier li a{
        background:#ddd;
        border:3px solid #ffff;
        border-left:0;
        color:#666;
        cursor:pointer;
        display:block;
        height:35px;
        line-height:35px;
        padding:0 98px;
        text-decoration:none;
        text-transform:bold;
    }
    #tabContaier li a:hover{
        background:#fff;
    }
    #tabContaier li a.active{
        background:#fbfbfb;
        border:px solid #fff;
        border-right:px;
        color:#333;
    }
    .tabDetails{
        background:#fbfbfb;
        border:1px solid #fff;
        margin:34px px;
    }
    .tabContents{
        padding:px

}
    .tabContents h1{
        font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
        padding:0 0 px;
                                width:auto;



</style>

JavaScript 代码:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // Hide all tab conten divs by default
    $(".tabContents").hide(); 

    // Show the first div of tab content by default
    $(".tabContents:first").show(); 

    //Fire the click event
    $("#tabContaier ul li a").click(function(){ 

        // Catch the click link
        var activeTab = $(this).attr("href"); 

        // Remove pre-highlighted link
        $("#tabContaier ul li a").removeClass("active"); 

        // set clicked link to highlight state
        $(this).addClass("active");         

        // hide currently visible tab content div
        $(".tabContents").hide(); 

        // show the target tab content div by matching clicked link.
        $(activeTab).fadeIn(); 
 return true;

    });
});
</script>

Answer 1

你的 jQuery 和 html 看起来不错，你应该在 jQuery 1.4 版本中遇到问题。

如果您想要对选项卡进行 URL 响应，请使用以下内容:

var anchor = window.location.hash;//returns url hash only like: '#tab4'

if ( anchor.length > 1 ) {
    $("#tabContaier ul li a").removeClass("active"); 
    $('a[href="' + anchor + '"]').addClass('active');

    $(anchor).fadeIn();
}