Fatal编程技术网
  • jquery/
  • Jquery 一个按钮，显示/隐藏多个div

Jquery 一个按钮，显示/隐藏多个div

jquery html css

Jquery 一个按钮，显示/隐藏多个div,jquery,html,css,Jquery,Html,Css,我对jquery还是新手，正在尝试这样做：单击按钮，在左栏和右栏中隐藏/显示信息。我目前有3个按钮，每个按钮在单击时显示不同的信息。我希望当网页加载时，第一个按钮上的信息会显示出来 但是，目前，我的按钮和信息都不起作用。感谢您的帮助 JS小提琴： HTML: <div class="left-container"> <ul id="illis"> <li id="more"> <figure class="

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

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

JS小提琴：

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>

/*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;
}

$(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();
    });
});
JS:

<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>

/*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;
}

$(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();
    });
});
在DOM ready的末尾添加以下行

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>

$（文档）.ready（函数（）{
var tabs=$（'ul#导航li a'）；
tabs.bind（'click'，函数（事件）{
event.preventDefault（）；
var$anchor=$（此）；
var otherShow='#'+this.href.split（'-'）[1]；
选项卡。每个（函数（）{
var other='#'+this.href.split（'-'）[1]；
$（其他）.hide（）；
$（$（this.attr（'href'））.hide（）；
});
$（$anchor.attr（'href'））.fadeIn（'slow'）；
$（otherShow.fadeIn（'slow'）；
});
tabs.first（）。单击（）；
});

在DOM ready的末尾添加以下行

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>

$（文档）.ready（函数（）{
var tabs=$（'ul#导航li a'）；
tabs.bind（'click'，函数（事件）{
event.preventDefault（）；
var$anchor=$（此）；
var otherShow='#'+this.href.split（'-'）[1]；
选项卡。每个（函数（）{
var other='#'+this.href.split（'-'）[1]；
$（其他）.hide（）；
$（$（this.attr（'href'））.hide（）；
});
$（$anchor.attr（'href'））.fadeIn（'slow'）；
$（otherShow.fadeIn（'slow'）；
});
tabs.first（）。单击（）；
});

首先，将导航文本放在
//仅用于演示的示例视频中
首先，将导航文本放在
//仅用于演示的示例视频中
您好，谢谢。右栏中的信息会随着按钮的单击而更改，但左栏中的信息不会更改。我如何做到当用户单击按钮“更多”时，显示越来越多的div#text More。这同样适用于另一个divsOh好的，我会调查的。@user3453264更新了我的答案。嗨，谢谢你。右栏中的信息会随着按钮的单击而更改，但左栏中的信息不会更改。我如何做到当用户单击按钮“更多”时，显示越来越多的div#text More。这同样适用于另一个divsOh好的，我会调查一下。@user3453264更新了我的答案。您好，谢谢您，但问题与下面给出的建议相同：右栏中的信息会随着按钮的单击而更改，而左栏中的信息不会更改。我如何做到当用户单击按钮“更多”时，显示越来越多的div#text More。这同样适用于另一个分区，左边应该看到什么？我已经更新了代码，左边的页面也在更改。演示也更新了。在左边，应该是视频。因此，当你点击“更多”按钮时，左边显示视频，右边显示信息。请尝试在你的网站上更新代码，因为你有视频。如果有什么问题，请告诉我。嗨，对不起，还有一个问题。点击按钮后，视频是否可以自动播放？我尝试了自动播放，但页面加载的那一刻，一切都会播放。您好，谢谢您，但问题与下面给出的建议相同：右栏中的信息会随着按钮的单击而更改，而左栏中的信息不会更改。我如何做到当用户单击按钮“更多”时，显示越来越多的div#text More。这同样适用于另一个分区，左边应该看到什么？我已经更新了代码，左边的页面也在更改。演示也更新了。在左边，应该是视频。因此，当你点击“更多”按钮时，左边显示视频，右边显示信息。请尝试在你的网站上更新代码，因为你有视频。如果有什么问题，请告诉我。嗨，对不起，还有一个问题。点击按钮后，视频是否可以自动播放？我尝试了自动播放，但页面加载的那一刻，一切都开始播放。