Jquery隐藏多个div onclick [英] Jquery hide multiple divs onclick

问题描述

我正在制作健身应用程序，在每个练习页面上我都有一个显示信息，数据输入和进度的按钮。这样工作正常，但是当单击按钮时顶部的divs层相互叠加并同时显示。

I am making a fitness application, on each exercise page I have a buttons which display the 'information','data input' and the'progress'. This is working fine, however, when the buttons are clicked the divs layer over the top each other and displayed at the same time.

我想要的是主要的信息显示，但当用户单击其他按钮时，隐藏其他按钮div。因此，一次只显示一个div。

What I want is the information to primarily be displayed but when the user clicks the other buttons the other button divs are hidden. Thus only displaying one div at a time.

HTML

<div id="buttons">
    <a class="Smallbutton" id="showInfo">
        <img src="img/info.png" />
    </a>
    <a class="Smallbutton" id="showDataInput">
        <img src="img/add-item.png" />
    </a>
    <a class="Smallbutton" id="showHistory">
        <img src="img/bar-chart.png" />
    </a>
</div>
<div class="info" style="display: none;">
    <p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
        yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput" style="display: none;">
    <form onsubmit="save_data()">
        Reps:
        <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
        <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
        <input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();" />
</div>

SCRIPT

//JQUERY SHOW/HIDE HISTORY

$(document).ready(function() {
    $('#showHistory').click(function() {
            $('.history').slideToggle("fast");
    });
});



//JQUERY SHOW/HIDE DATA INPUT

$(document).ready(function() {
    $('#showDataInput').click(function() {
            $('.dataInput').slideToggle("fast");

    });
});

//JQUERY SHOW/HIDE INFO

$(document).ready(function() {
    $('#showInfo').click(function() {
            $('.info').slideToggle("fast");

    });
});

这是我的JSFiddle http://jsfiddle.net/GYru6/

Here is my JSFiddle http://jsfiddle.net/GYru6/

提前谢谢

我在 http://jsfiddle.net/XwN2L/ 之后发现了这个例子。当我将代码实现到我的网站时，所有的div都会立即显示。

I found this example of something that i am after http://jsfiddle.net/XwN2L/ however when i implement the code into my site all the divs are displayed at once.

推荐答案

一些小的调整

• 向所有按钮添加 data-target =


• 在所有div中添加一个目标

• Add a data-target="" to all buttons
• Add a class target to all the div's

尝试

<div id="buttons">  
    <a class="Smallbutton" id="showInfo" data-target=".info"><img src="img/info.png"/></a>
    <a class="Smallbutton" id="showDataInput" data-target=".dataInput"><img src="img/add-item.png"/></a>
    <a class="Smallbutton" id="showHistory" data-target=".history"><img src="img/bar-chart.png"/></a>
</div>  

<div class="info target" style="display: none;">
    <p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput target" style="display: none;">
    <form onsubmit="save_data()">
        Reps: <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required />
        Sets: <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required />
        <input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();" />
    </form>
</div>
<div class="history target" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();"/>
</div>

然后

$(document).ready(function () {
    var $targets = $('.target');
    $('#buttons .Smallbutton').click(function () {
        var $target = $($(this).data('target')).slideToggle();
        $targets.not($target).hide()
    });
});

演示：小提琴

这篇关于Jquery隐藏多个div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！