一键显示/隐藏多个 div

Question

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

但是，目前，我的按钮和信息都不起作用。任何帮助表示赞赏。

JS 小提琴：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

Answer 2

首先，将导航文本放入<a> 标签内。

  <ul id="navigation">
     <li class="slidenav content-close active"><a href="#text-more">More</a></li>
     <li class="slidenav content-close"><a href="#text-distance">Distance</a></li>
     <li class="slidenav content-close"><a href="#text-art">Art</a></li>
  </ul>

使用这个css，最初隐藏所有视频：

#illis li{
    display: none;
}

而且，我对你的 jQuery 做了一些修改：

更新：添加脚本，以便在单击相应选项卡时自动播放视频

$(document).ready(function () {
    var tabs = $('#navigation li a');
     $("#more").fadeIn("slow");              // show default video
     $('#myvideo1').get(0).play();           // play default video
    tabs.click(function () {
       var $anchor = $(this).attr("href");
       tabs.each(function(){  
       var $curr = $(this).attr("href");
           $($curr).hide();
                });
        if($anchor == "#text-distance"){
            $("#more").hide();
            $("#art").hide();  
            $("#distance").fadeIn("slow");
            $('#myvideo2').get(0).play();   // play respective video
            $('#myvideo1').get(0).pause();  // pause the other videos
            $('#myvideo3').get(0).pause();  // pause the other videos
        }
        if($anchor == "#text-more"){
            $("#more").fadeIn("slow");
            $("#art").hide();  
            $("#distance").hide();
            $('#myvideo1').get(0).play();
            $('#myvideo2').get(0).pause();
            $('#myvideo3').get(0).pause();
        }
        if($anchor == "#text-art"){
            $("#more").hide();
            $("#art").fadeIn("slow");  
            $("#distance").hide();
            $('#myvideo3').get(0).play();
            $('#myvideo1').get(0).pause();
            $('#myvideo2').get(0).pause();
        }
        $($anchor).fadeIn("slow");
        event.preventDefault();
    });


});

WORKING DEMO //Used sample videos just for demo