Jquery选项卡显示选项卡内容

Question

我在这个jsfiddle http://jsfiddle.net/wYuxw/12/中构建了一个简单的响应标签小部件，但是在单击导航链接时我无法显示相应的内容。我从一个我非常喜欢的网站中利用了这一点，他们用它来过滤内容列表 - 我试图把它变成一个简单的显示/隐藏标签设置。这是我的HTML：

            <ul>
                <li class="active" data-tab="all">All ideas.</li>

                <li data-tab="report">reports</li>

                <li data-tab="pers">perspectives</li>

                <li data-tab="book">books</li>

                <li data-tab="video">videos</li>
                <!-- <li data-tab="event">events<span></span></li> -->

                <li class="blog"><a href=
                "http://bits.hugeinc.com/">tech</a></li>
            </ul>
        </div>

        <ul class="blocks" id="ideas">
            <li class="report" id="">
                <a class="block" href=
                "/ideas/perspective/sitecore-speak-introduction"><span class="eyebrow">
                <b>Perspective</b> / Technology</span></a>

                <h4><a class="block" href=
                "/ideas/perspective/sitecore-speak-introduction">Sitecore
                Speak Intro With Custom Datasource.</a></h4>

                <p><a class="block" href=
                "/ideas/perspective/sitecore-speak-introduction">A guide to
                creating a Sitecore Speak UI component.</a></p>
            </li>

            <li class="pers" id="">
                <a class="block" href=
                "/ideas/report/lean-personalization"><span class=
                "eyebrow"><b>Report</b> / Strategy</span></a>

                <h4><a class="block" href=
                "/ideas/report/lean-personalization">Lean
                Personalization.</a></h4>

                <p><a class="block" href=
                "/ideas/report/lean-personalization">How a basic business
                rules-based approach to personalization can add value to
                the user experience.</a></p>
            </li>

            <li class="book" id="">
                <a class="block" href=
                "/ideas/perspective/design-decline"><span class=
                "eyebrow"><b>Perspective</b> / Creative</span></a>

                <h4><a class="block" href=
                "/ideas/perspective/design-decline">Design
                Decline.</a></h4>

                <p><a class="block" href=
                "/ideas/perspective/design-decline">How rigidity in British
                design tuition is hampering creativity.</a></p><a class=
                "block" href="/ideas/perspective/design-decline"></a>
            </li>

            <li class="video" id="2eb3520573d7438983adc8eb6535429c">
                <a class="block" href=
                "/ideas/perspective/still-life-in-motion"><span class=
                "eyebrow"><b>Perspective</b> / Motion and Media</span></a>

                <h4><a class="block" href=
                "/ideas/perspective/still-life-in-motion">Still Life in
                Motion.</a></h4><a class="block" href=
                "/ideas/perspective/still-life-in-motion"></a>

                <p>A discussion with photographer and inventor Matthew
                Huber on exploring a new type of robotically enabled stop
                motion animation designed to produce beautiful and unique
                high-quality motion experiences.</p>
            </li>

            <li class="perspective" id="779a90e72d6b4886ad82385dd337d4cd">
                <a class="block" href=
                "/ideas/perspective/restartup"><span class=
                "eyebrow"><b>Perspective</b> / Strategy</span></a>

                <h4><a class="block" href=
                "/ideas/perspective/restartup">Re-Startup: The New Love
                Affair Between Big Business and Tech
                Startups.</a></h4><a class="block" href=
                "/ideas/perspective/restartup"></a>

                <p>This "bubble" is different.</p>
            </li>
        </ul>

我的JS：

"use strict";
var HUGE = HUGE || {};
HUGE = HUGE || {}, HUGE.Ideas = function(n) {
    function i() {
        var t = 0;
        n("#tabs li span").on("touchstart click", function(i) {
            t ? setTimeout(function() {
                n("#tabs .close").trigger("touchstart");
            }, 1e3) : (t = 1, i.stopPropagation(), i.preventDefault(), n("#tabs").addClass("overlay engage"), n("body").addClass("clip"))
        });
        n("#tabs .close").on("touchstart click", function(i) {
            i.preventDefault(), i.stopPropagation(), n("#tabs").removeClass("overlay engage"), n("body").removeClass("clip"), t = 0
        })
    }

    function t() {
        var t = n("[data-tab]");
        n(t).click(function() {
            var i = n(this).data("tab");
            t.removeClass("active"), n(this).addClass("active"), n("#ideas").empty(), n(".load").show(), i = i === "all" ? "" : i, n(".").data({
                data: {
                    filter: i,
                    page: 0
                }
            }).click()
        })
    }
    return {
        init: function() {
            t(), i(), s(), r()
        }
    }
}(jQuery),