> 웹 프론트엔드 > JS 튜토리얼 > 특정 div의 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법(코드 예)

특정 div의 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법(코드 예)

青灯夜游
풀어 주다: 2018-10-24 15:49:54
앞으로
3304명이 탐색했습니다.

이 글의 내용은 특정 div에서 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법을 소개하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

nbsp;html>


    <meta>
    <title></title>
<style>
*{ padding:0px;
    margin:0px;}
.wrapper div{display:none;
    width:200px;
    height:250px;
    border:10px solid #FF3;
    }
div.start{text-align:center;
    display:block;
    width:200px;
    border:5px solid #F00;
    }
.active{
    background-color:orange;}        
    </style>



<div>辣鸡游戏</div>
<div>
<button>第一关</button>
<button>第二关</button>
<button>第三关</button>
<button>第四关</button>
<div>你就是个大傻逼</div>
<div>辣鸡</div>
<div>废物</div>
<div>蠢狗</div>
</div>
<script>
var btn = document.getElementsByTagName(&#39;button&#39;);
var div = document.getElementsByClassName(&#39;content&#39;);
for(var i =0; i<btn.length; i++){
    (function(n){
    btn[n].onclick = function(){
        for(var j = 0; j < btn.length; j++){
            btn[j].className=&#39;&#39;;
            div[j].style.display=&#39;none&#39;;
            }
        this.className=&#39;active&#39;;
        div[n].style.display=&#39;block&#39;;
        div[n].p
        
        }
    }(i))
}

</script>

로그인 후 복사

특정 div의 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법(코드 예)

특정 div의 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법(코드 예)

위 내용은 특정 div의 텍스트 내용 표시를 변경하기 위해 js에서 버튼을 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿