Вкладки, видимые через событие url и onclick

Question

Я пытаюсь создать интерфейс с вкладками, в котором вкладки могут быть видны через URL и при нажатии.У меня есть следующий код 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>

Когда я нажимаю на вкладку, ничего не происходит, URL просто меняется Что я делаю не так

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 против tab-container

Answer 3

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

эта строка добавляет эти классы в li, а не в div