jquery隱藏多個div onclick

我正在製作一個健身應用程序，在每個練習頁上我有一個顯示'信息'，'數據輸入'和'進度'的按鈕。這是工作正常，但是，當按鈕被點擊divs頂層，並在同一時間顯示。jquery隱藏多個div onclick

我想要的是主要顯示的信息，但是當用戶單擊其他按鈕時，其他按鈕div被隱藏。因此一次只顯示一個div。

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/

預先感謝您

我發現的東西這個例子中，我是http://jsfiddle.net/XwN2L/然而，當後我將代碼實施到我的網站所有div都一次顯示。

來源

2014-02-12 user2336624

一些小的調整

添加data-target=""所有按鈕
添加類target所有div的

嘗試

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

演示：Fiddle

來源

2014-02-12 11:35:36

這是完美的，感謝您的信息！ – user2336624

試穿點擊功能添加其他.hide()的div

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

FIDDLE

來源

2014-02-12 11:37:38 yashhy

我會用一個hideAll功能，並調用它的每個元素。這將簡化邏輯一點。

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

然後調用它在每個點擊事件

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

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

來源

2014-02-12 11:40:29 roo2

嘗試這種方式，

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

和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

來源

2014-02-12 11:40:37 Rocky

jquery隱藏多個div onclick

回答

相關問題