ホームページ > ウェブフロントエンド > jsチュートリアル > 特定のdiv内のテキストコンテンツの表示を変更するボタンをjsで実装する方法(コード例)

特定のdiv内のテキストコンテンツの表示を変更するボタンをjsで実装する方法(コード例)

青灯夜游
リリース: 2018-10-24 15:49:54
転載
3313 人が閲覧しました

この記事の内容は、特定の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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート