Для сайта, который я делаю, я хочу загрузить один div и скрыть другой, затем иметь две кнопки, которые будут переключать вид между div с помощью JavaScript.
Это мой текущий код.
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>
Вторая функция, заменяющая div2, не работает, а первая работает.
Чтобы показать или скрыть элемент, управляйте его свойством style. В большинстве случаев вы, вероятно, просто хотите изменить свойство display
элемента:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
В качестве альтернативы, если вы хотите, чтобы элемент занимал место (например, если вы хотите скрыть ячейку таблицы), вы можете изменить свойство visibility
:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Если вы хотите скрыть коллекцию элементов, просто выполните итерации по каждому элементу и измените display
элемента на 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>
Большую часть времени вы, вероятно, будете просто переключаться между display: none
и display: block
, что означает, что при отображении коллекции элементов может быть достаточно следующего.
Вы можете указать желаемое display
в качестве второго аргумента, если вы не хотите, чтобы по умолчанию использовался block
.
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" />
В качестве альтернативы, лучшим подходом для показа элемента(ов) было бы просто удалить встроенный стиль display
, чтобы вернуть его в исходное состояние. Затем проверить вычисленный стиль display
элемента, чтобы определить, не скрыт ли он каскадным правилом. Если да, то покажите элемент.
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>
(Если вы хотите сделать еще один шаг вперед, вы можете даже подражать тому, что делает jQuery, и определить стиль элемента по умолчанию в браузере, добавив элемент в пустой iframe
(без конфликтующей таблицы стилей), а затем получить вычисленный стиль. При этом вы будете знать истинное начальное значение свойства display
элемента, и вам не придется жестко кодировать значение, чтобы получить желаемый результат).
Аналогично, если вы хотите переключить отображение элемента или коллекции элементов, вы можете просто перебрать каждый элемент и определить, виден ли он, проверив вычисленное значение свойства display
. Если он виден, установите display
в none
, иначе удалите встроенный стиль display
, а если он все еще скрыт, установите display
в указанное значение или в жестко заданное по умолчанию 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>
Вы также можете использовать в jQuery JavaScript-фреймворка:
Чтобы Скрыть Блок Div
$(".divIDClass").hide();
Чтобы показать div блок
$(".divIDClass").show();
Вы можете Скрыть/показать div с помощью функция JS. образец ниже
<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>
Использование стиля:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
Использование обработчика событий в JavaScript лучше, чем атрибут onclick="""
в 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 может помочь вам легко манипулировать элементами DOM!
Я нашел это простой JavaScript-код очень удобно!
#<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>
Установить html как
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
И теперь установить JavaScript как
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
}
Просто установить атрибут стиля код:
Чтобы показать скрытый див
<div id="xyz" style="display:none">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='block'; // to hide
Чтобы скрыть отображаемые див
<div id="xyz">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='none'; // to display
<script type="text/javascript">
function hide(){
document.getElementById('id').hidden = true;
}
function show(){
document.getElementById('id').hidden = false;
}
</script>
Я нашел этот вопрос и я в последнее время реализует несколько интерфейсов с использованием Vue.js так это может быть хорошей альтернативой.
Первый код не скрывая "целевой", когда вы нажимаете на просмотреть профиль. Вы не переопределяя цели содержание с
див2`.
в
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>
в
И Purescript ответа, для людей, использующих Галоида:
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!" ]
Если тебя "осмотрите элемент и", Вы'll увидеть что-то вроде:
<div style="display: none">Hi there!</div>
но ничего не отображать на экране, как ожидалось.
Просто нужна функция для реализации Показать/Скрыть 'див' с использованием 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>