Question

我有两个标签式导航，一个在顶部，一个在底部。我通过类而不是id来定位div，以便它们都显示相关内容。

当用户点击“商家”标签时，它会在顶部和底部显示该用户的相关信息。我的问题是我不能让两个标签显示“活动”状态。它只显示在我点击的标签上，无论是在顶部还是底部，尽管它们具有相同的类名。

欢迎任何帮助。

麦克

HTML：

<!-- TOP TAB  -->
<section id="registerTabsContainer">

    <ul class="tabs">
        <li><a href=".tabViewer">Are you a Viewer?</a></li>
        <li><a href=".tabBusiness">Are you a Business?</a></li>
        <li><a href=".tabPlatform">Are you a Platform?</a></li>
    </ul>

    <!-- TOP CONTENT  -->
    <div class="registerTabsContent tabViewer">
        <h1>Register as a Viewer</h1>
    </div>

    <div class="registerTabsContent tabBusiness">
        <h1>Register as a Business</h1>
    </div>

    <div class="registerTabsContent tabPlatform">
        <h1>Register as a Business</h1>
    </div>

    <!-- BOTTOM  TAB  -->
    <section id="tourSummaryTabsContainer">

        <ul class="tabs">
            <li><a href=".tabViewer">Are you a Viewer?</a></li>
            <li><a href=".tabBusiness">Are you a Business?</a></li>
            <li><a href=".tabPlatform">Are you a Platform?</a></li>
        </ul>

        <!-- BOTTOM  CONTENT  -->
        <div class="tourSummaryTabsContent tabViewer">
            <h1> Viewer content Bottom</h1>
        </div>

        <div class="tourSummaryTabsContent tabBusiness">
            <h1>Register as a Business</h1>
        </div>

        <div class="tourSummaryTabsContent tabPlatform">
            <h1>Register as a Business</h1>
        </div>

JQUERY：

$(document).ready(function() {  
    // tabs  script
    $('.tabs li a:first').addClass('active');
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide();

    $('.tabs li a').click(function() {
        var t = $(this).attr('href');

        $('.tabs li a').removeClass('active');     
        $(this).addClass('active');
        $('.registerTabsContent, .tourSummaryTabsContent').hide();
        $(t).fadeIn('slow');  

        return false;    
    })  
});

CSS：

.tabs {
    list-style-type: none;
    margin:0;
    padding:0;  
}

.tabs li {
    padding: 0;
    list-style-type: none;
    margin:0;
    float:left;   
    list-style:none;
}
.tabs li a {
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
    color:#999999; 
    padding:7px 25px 4px 25px; 
    display:block; 
    text-decoration:none;

    background: rgba(227,227,227,1);
    /*border-right: 1px solid rgba(153,153,153,1); */
}

.tabs li a.active {
    background: white;   
    color:#999999;
    /*border-top: 1px solid white;*/ 
}

.tabs li a:hover {
    padding:7px 25px 4px 25px;
    background:#fff; 
}

Answer 1

在这里，我更新了您的代码以使用活动类，而不是非活动类。

HTML

<ul class="tabs">
        <li><a href=".tabViewer">Are you a Viewer?</a></li>
        <li><a href=".tabBusiness">Are you a Business?</a></li>
        <li><a href=".tabPlatform">Are you a Platform?</a></li>
    </ul>

    <!-- TOP CONTENT  -->
    <div class="registerTabsContent tabViewer">
        <h1>Register as a Viewer</h1>
    </div>

    <div class="registerTabsContent tabBusiness">
        <h1>Register as a Business</h1>
    </div>

    <div class="registerTabsContent tabPlatform">
        <h1>Register as a Business</h1>
    </div>

    <!-- BOTTOM  TAB  -->
    <section id="tourSummaryTabsContainer">
        <ul class="tabs">
            <li><a href=".tabViewer">Are you a Viewer?</a></li>
            <li><a href=".tabBusiness">Are you a Business?</a></li>
            <li><a href=".tabPlatform">Are you a Platform?</a></li>
        </ul>

        <!-- BOTTOM  CONTENT  -->
        <div class="tourSummaryTabsContent tabViewer">
            <h1> Viewer content Bottom</h1>
        </div>

        <div class="tourSummaryTabsContent tabBusiness">
            <h1>Register as a Business</h1>
        </div>

        <div class="tourSummaryTabsContent tabPlatform">
            <h1>Register as a Business</h1>
        </div>
    </section>

CSS

.tabs li {
    padding: 0;
    list-style-type: none;
    margin: 0;
    float: left;
    list-style: none;
}

    .tabs li a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #999999;
        padding: 7px 25px 4px 25px;
        display: block;
        text-decoration: none;
        background: #e3e3e3;
        /*border-right: 1px solid rgba(153,153,153,1); */
    }

        .tabs li a.active, .tabs li a:hover{
            background: #fff;
            /*border-top: 1px solid white;*/
        }

的JavaScript

$(document).ready(function () {
    // tabs  script
    $('li:eq(0) a', '.tabs').addClass('active');
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide();

    $('.tabs li a').click(function(e) {
        e.preventDefault();

        if (!$(this).hasClass('active')) {
            $('a.active').removeClass('active');
            var i = $(this).parent().index();
            $('li:eq(' + i + ') a', '.tabs').addClass('active');

            $('.registerTabsContent, .tourSummaryTabsContent').hide();
            var t = $(this).attr('href');
            $(t).fadeIn('slow');
        }
    });

});

此外，这是一个有效的FIDDLE。如果您需要任何解释，请告诉我。

同步选项卡式导航

1 个答案: