Question

我尝试创建一个标签式界面，通过网址和点击标签可以看到标签。我有以下jQuery代码

$(function() {
        var tabContent = $('.tab-content');
        var tabs = $('.stream-tabs li');
        var urlHash = window.location.hash;

        tabContent.not(hash).addClass('inactive');
        tabs.find('[href=' + hash + ']').addClass('active-tab');

        tabs.click(function() {
            $(this).addClass('active-tab').siblings().removeClass('active-tab');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();
            return false;
        });
    });

这是我的html标记

<ul class="stream-tabs">
                    <li><a href="#pheed-timeline">Pheed Timeline</a></li>
                    <li><a href="#directed-pheeds">Directed Pheeds</a></li>
                    <li><a href="#favourite-pheeds">Favourite Pheeds</a></li>
                </ul>
        <div class="tab-container">
            <div id="pheed-timeline" class="tab-content active-tab">
           Pheeed Timovmds
            </div>

            <div id="directed-pheeds" class="tab-content inactive">
           Directed pheeds
            </div>

            <div id="favourite-pheeds" class="tab-content inactive">
           favourite pheeds
            </div>
       </div>

当我点击标签时，没有任何反应，网址只会改变我做错了什么

Answer 1

我认为你正在寻找这样的东西：

// get the current url or even the anchor of it
var path = document.location.toString();
// save current anchor in "anchor" var
var anchor = '#' + path.split('#')[1];   

// if no anchor is set, jquery will automatically set it to "undefined"
if(anchor != '#undefined') {
    // remove the class from the active tab
    $(".active").removeClass("active");  
    // set the active tab to the new one
    $(anchor).parent().addClass("active");
    // this hides the content of all tabs
    $(".tabContent").hide();  
    // show the new content of the clicked tab
    var content_show = $(anchor).attr("title");  
    $("#"+content_show).show();
}

我希望它不难理解。但它应该对您自己的代码有所帮助。

为了更好地理解，这是我的HTML代码：

<div class="tabs">
    <ul>
        <li class="active"><a href="#" title="tabContent_1" class="tab">{{@lng.settings}}</a></li>
        <li><a href="#members" id="members" title="tabContent_2" class="tab">{{@lng.members}}</a></li>
        <li><a href="#milestones" id="milestones" title="tabContent_3" class="tab">{{@lng.milestones}}</a></li>
        <li><a href="#roles" id="roles" title="tabContent_4" class="tab">{{@lng.roles}}</a></li>
        <li><a href="#categories" id="categories" title="tabContent_5" class="tab">{{@lng.categories}}</a></li>
    </ul>
</div>

<div class="tabContent" id="tabContent_1">
<!-- content here -->
</div>

Answer 2

$('.tab-content') !== class="tab-container"

tab-content vs tab-container

Answer 3

    $(this).addClass('active-tab').siblings().removeClass('active-tab');

这一行将这些类添加到li而不是div的

通过url和onclick事件显示标签

3 个答案: