1

この問題を解決するために、私は一日中検索と微調整を行っています。自分の状況に合った解決策を求めて、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>
4

1 に答える 1

0

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();
}
于 2013-01-27T23:56:40.047 に答える