Untuk situs web saya'm lakukan, saya ingin memuat satu div, dan menyembunyikan yang lain, kemudian memiliki dua tombol yang akan beralih pandangan antara div menggunakan JavaScript.
Ini adalah saat ini saya kode
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInOtherContainer(replace_target, source) {
document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target">div2</span>
</div>
Fungsi kedua yang menggantikan div2 tidak bekerja, tetapi yang pertama adalah.
Dalam rangka untuk menampilkan atau menyembunyikan elemen, memanipulasi elemen's gaya properti. Dalam kebanyakan kasus, anda mungkin hanya ingin mengubah elemen's display
property:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Atau, jika anda masih ingin elemen untuk menempati ruang (seperti jika anda ingin menyembunyikan sebuah sel tabel), anda bisa mengubah elemen's visibility
property sebaliknya:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Jika anda ingin menyembunyikan sebuah kumpulan dari elemen-elemen, hanya iterate atas setiap elemen dan mengubah elemen's display
untuk none
:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
Sebagian besar waktu, anda mungkin akan hanya menjadi toggling antara display: none
dan display: block
, yang artinya sebagai berikut mungkin akan cukup ketika menunjukkan kumpulan dari elemen-elemen.
Secara opsional, anda dapat menentukan yang diinginkan display
sebagai argumen kedua jika anda don't ingin default untuk blok
.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
Selain itu, pendekatan yang lebih baik untuk menunjukkan elemen(s) akan untuk hanya menghapus inline display
styling dalam rangka untuk kembali ke keadaan awal. Kemudian periksa dihitung display
gaya elemen dalam rangka untuk menentukan apakah itu sedang disembunyikan oleh mengalir aturan. Jika demikian, maka menunjukkan elemen.
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(Jika anda ingin mengambil langkah lebih lanjut, anda bahkan bisa meniru apa jQuery tidak dan menentukan unsur's default browser styling dengan menambahkan elemen kosong iframe
(tanpa bertentangan stylesheet) dan kemudian mengambil dihitung styling. Dalam melakukannya, anda akan tahu sebenarnya awal display
nilai properti dari elemen dan anda tidak't harus hardcode nilai dalam rangka untuk mendapatkan hasil yang diinginkan.)
Demikian pula, jika anda ingin beralih display
dari suatu elemen atau kumpulan dari elemen-elemen, anda hanya bisa iterate atas masing-masing unsur dan menentukan apakah hal ini terlihat dengan memeriksa nilai yang dihitung dari display
properti. Jika itu's terlihat, mengatur display
untuk tidak ada
, jika tidak menghapus inline display
styling, dan jika itu's masih tersembunyi, mengatur display
untuk nilai yang ditentukan atau hardcoded default, block
.
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>
Anda dapat Menyembunyikan/Menampilkan Div menggunakan Js fungsi. contoh di bawah ini
<script>
function showDivAttid(){
if(Your Condition) {
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
<div id="attid" style="display:none;">Show/Hide this text</div>
Menggunakan gaya:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
Menggunakan event handler di JavaScript lebih baik daripada onclick=""
atribut dalam HTML:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript:
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
jQuery dapat membantu anda untuk memanipulasi elemen DOM mudah!
Saya menemukan ini polos kode JavaScript sangat berguna!
#<script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if ( e.style.display == 'block' )
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Set HTML anda sebagai
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
Dan sekarang mengatur javascript sebagai
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Hanya Sederhana Mengatur gaya atribut ID:
Untuk Menunjukkan div tersembunyi
<div id="xyz" style="display:none">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='block'; // to hide
Untuk menyembunyikan ditampilkan div
<div id="xyz">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='none'; // to display
Saya menemukan pertanyaan ini dan baru-baru ini saya menerapkan beberapa UIs menggunakan Vue.js jadi ini bisa menjadi alternatif yang baik.
Pertama kode anda tidak bersembunyi target
ketika anda mengklik pada Tampilan Profil. Anda mengganti isi target
dengan div2
.
let multiple = new Vue({
el: "#multiple",
data: {
items: [{
id: 0,
name: 'View Profile',
desc: 'Show profile',
show: false,
},
{
id: 1,
name: 'View Results',
desc: 'Show results',
show: false,
},
],
selected: '',
shown: false,
},
methods: {
showItem: function(item) {
if (this.selected && this.selected.id === item.id) {
item.show = item.show && this.shown ? false : !item.show;
} else {
item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
}
this.shown = item.show;
this.selected = item;
},
},
});
<div id="multiple">
<button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>
<div class="" v-if="shown">: {{selected.desc}}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
Dan Purescript menjawab, untuk orang-orang yang menggunakan Halogen:
import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS
render state =
HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]
Jika anda "inspect element" anda'll melihat sesuatu seperti:
<div style="display: none">Hi there!</div>
tapi tidak ada yang benar-benar akan menampilkan pada layar anda, seperti yang diharapkan.
Hanya Fungsi Sederhana Perlu Untuk mengimplementasikan Show/hide 'div' menggunakan JavaScript
<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>
<div id="states" style="display: block; line-height: 1.6em;">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
<a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
</div>