반응형
JavaScript를 사용하여 'div'표시 / 숨기기
내가하고있는 웹 사이트의 경우 하나의 div를로드하고 다른 div를 숨기고 JavaScript를 사용하여 div간에보기를 전환하는 두 개의 버튼이 있습니다.
이것은 내 현재 코드입니다
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속성 의 계산 된 값을 확인하여 해당 요소가 표시되는지 여부를 결정할 수 있습니다 . 이 볼의 경우, 설정 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 스타일을 간단히 조작 할 수 있습니다 ...
document.getElementById('target').style.display = 'none';
Js 기능을 사용하여 Div를 숨기거나 표시 할 수 있습니다. 아래 샘플
<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>
자바 스크립트 :
<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 may help you to manipulate DOM elements easy!
I found this plain JavaScript code very handy!
#<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 your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
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
}
<script type="text/javascript">
function hide(){
document.getElementById('id').hidden = true;
}
function show(){
document.getElementById('id').hidden = false;
}
</script>
Just Simple Set the style attribute of ID:
To Show the hidden div
<div id="xyz" style="display:none">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='block'; // to hide
To hide the shown div
<div id="xyz">
...............
</div>
//In JavaScript
document.getElementById('xyz').style.display ='none'; // to display
And the Purescript answer, for people using 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!" ]
If you "inspect element", you'll see something like:
<div style="display: none">Hi there!</div>
but nothing will actually display on your screen, as expected.
Just Simple Function Need To implement Show/hide 'div' using 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>
I found this question and recently I was implementing some UIs using Vue.js so this can be a good alternative.
First your code is not hiding target when you click on View Profile. You are overriding the content target with 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>참고URL : https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript
반응형
'development' 카테고리의 다른 글
| 셀레늄 C # 웹 드라이버 : 요소가 나타날 때까지 기다립니다 (0) | 2020.05.26 |
|---|---|
| Java "이 언어 레벨에서 지원되지 않는 람다 표현식" (0) | 2020.05.26 |
| 날짜 문자열이 해당 형식의 유효한 날짜인지 올바르게 판별하십시오. (0) | 2020.05.26 |
| 포트 80에서 Flask를 실행하려면 어떻게해야합니까? (0) | 2020.05.26 |
| PHP 배열을 자바 스크립트로 변환 (0) | 2020.05.26 |