jquery - 一键显示/隐藏多个div

Question

我还是 jquery 的新手，我正在尝试这样做:单击按钮，隐藏/显示左右栏中的信息。我目前有 3 个按钮，每个按钮在单击时显示不同的信息。我希望它在加载网页时显示第一个按钮上的信息。

但是，目前我的按钮和信息都不起作用。感谢您的帮助。

JS fiddle :http://jsfiddle.net/xYqX7/18/

HTML:

<div class="left-container">
    <ul id="illis">
        <li id="more">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo1">
                <source src="videos/all.mp4" type="video/mp4" />
            </video>
        </li>
        <li id="distance">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo2">
                <source src="videos/all_test.mp4" type="skype/mp4" />
            </video>
        </li>
        <li id="art">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo3">
                <source src="videos/all_test.mp4" type="painting/mp4" />
            </video>
        </li>
    </ul>
</div>
<div id="content">
    <header class="col-3-1">
         <h1 class="title"><b>Kitchen Act</b></h1>

        <ul class="text-items">
            <li id="text-more">
                 <h2>More the merrier.</h2>

                <div class="">
                    <p>Trust me, two brains are better than one.</p>
                </div>
            </li>
            <li id="text-distance">
                 <h2>Distance is not a problem.</h2>

                <div class="">
                    <p>Trust me, two brains are better than one.</p>
                </div>
            </li>
            <li id="text-art">
                 <h2>Eating is art.</h2>

                <div class="">
                    <p>The act of eating encourages the act of creating (cooking, baking are both art generating forms).</p>
                </div>
            </li>
        </ul>
        <ul id="navigation">
            <li class="slidenav content-close active"><a href="#text-more"></a>More</li>
            <li class="slidenav content-close"><a href="#text-distance"></a>Distance</li>
            <li class="slidenav content-close"><a href="#text-art"></a>Art</li>
        </ul>
    </header>
</div>

CSS:

/*LEFT CONTAINER*/

.left-container{
    position:relative;
    width:67%;
    float:left;
}

#illis{
    list-style:none;
    padding:0;
    margin:0;
    float:right;
    clear:right;
    width:100%;
    overflow:hidden;

    padding-top: 10%;
}

/*
RIGHT CONTAINER*/

#text-distance, #text-art{
    display:none;
}

#content{
    color:#666;
    background-color:#ebebe8;
    position:fixed;
    overflow: hidden;
    top:0;
    bottom:0;
    left:67%;
    width:100%;
    padding-right:4em;
    z-index: 3;
}

header{
    color:#fff;
    background-color: blue;
}

.col-3-1{
    width:33%;
    height:100%;
    float:left;
    padding:3em 0;
    box-sizing:border-box;
}

.col-3-1:first-child{
    padding: 3em 2em;
}

.text-items{
    padding:0;
    margin:0;
    list-style:none;
}

JS:

$(document).ready(function () {

    var tabs = $('ul#navigation li a');

    tabs.bind('click', function (event) {
        var $anchor = $(this);
        var ids = tabs.each(function () {
            $($(this).attr('href')).hide();
        });
        $($anchor.attr('href')).fadeIn('slow');
        event.preventDefault();
    });
});

Answer 1

在准备好 DOM 的末尾添加以下行

tabs.first().click();

并且您的文本应该位于 a 元素内，以便它们可以点击。

所以你有:

$(document).ready(function () {

    var tabs = $('ul#navigation li a');

    tabs.bind('click', function (event) {
        event.preventDefault();
        var $anchor = $(this);
        var otherShow = '#' + this.href.split('-')[1];
        tabs.each(function () {
            var other = '#' + this.href.split('-')[1];
            $( other ).hide();
            $( $(this).attr('href') ).hide();
        });
        $( $anchor.attr('href') ).fadeIn('slow');
        $( otherShow ).fadeIn('slow');
    });

    tabs.first().click();
});

<a href="#...">Text to be clicked</a>

JS FIDDLE DEMO