javascript Jquery隐藏多个div onclick

Jquery hide multiple divs onclick

提问by user2336624

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.

我正在制作一个健身应用程序，在每个锻炼页面上，我都有一个按钮，显示“信息”、“数据输入”和“进度”。但是，这工作正常，当单击按钮时，divs 层彼此重叠并同时显示。

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.

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

HTML

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");

    });
});

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

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

Thank you in advance

先感谢您

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.

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

采纳答案by Arun P Johny

Some minor tweaks

一些小调整

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

• data-target=""给所有按钮添加一个
• target为所有 div添加一个类

Try

尝试

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

then

然后

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

Demo: Fiddle

演示：小提琴

回答by yashhy

try adding .hide()other divs on click function

尝试.hide()在点击功能上添加其他 div

 $(document).ready(function() {
        $('#showHistory').click(function() {
            $('.history').slideToggle("fast");
            $('.dataInput').hide(); //hide other elements
            $('.info').hide();  //hide other elements
        });
    });

FIDDLE

小提琴

回答by roo2

I would use a hideAll function and call it on each element. this will simplify the logic a bit.

我会使用一个 hideAll 函数并在每个元素上调用它。这将稍微简化逻辑。

function hideAll(){
    $('.info, .dataInput, .history').slideUp();
}

and then call it in each of your click events

然后在每个点击事件中调用它

$('#showInfo').click(function() {
    hideAll();
    $('.info').slideToggle("fast");
});

http://jsfiddle.net/GYru6/1/

http://jsfiddle.net/GYru6/1/

回答by Rocky

Try this way,

试试这个方法

The HTML,

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 infoContainers" 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 infoContainers" 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 infoContainers" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();" />
</div>

And the Javascript,

和 Javascript，

//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
    $('#showHistory').click(function() {
        $('.infoContainers').slideUp();
        $('.history').slideToggle("fast");
    });
});

//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
    $('#showDataInput').click(function() {
        $('.infoContainers').slideUp();
        $('.dataInput').slideToggle("fast");

    });
});

//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
    $('#showInfo').click(function() {
        $('.infoContainers').slideUp();
        $('.info').slideToggle("fast");

    });
});

DEMO

演示