堆棧內存溢出
  簡體   English   中英

如何在單擊按鈕之前隱藏 div 內容？

[英]How to hide div contents until button is clicked?

 原文  2019-10-28 01:55:15  0   3    jquery/ html/ css

問題描述

我只想讓按鈕出現在網頁加載上，然后單擊時出現以下 div。 我嘗試了其他人推薦的其他解決方案，並且每當我使用 display: none; 在.ytvid 上，單擊按鈕時將不再出現。 我認為通過讓 jQuery 說當按鈕被點擊時它會顯示在塊中它會起作用。 唉，我被困住了。 幫助將不勝感激。

我一點也不擅長 jQuery。 我試圖研究這個問題，但在試圖理解人們的答案時迷失了方向。 我試過 display: none; 並更改 jQuery 但它似乎壞了。

    <title>Danielle Pritchett</title>
    <link rel="stylesheet" href="https://use.typekit.net/yjb0hcj.css">




    <style>
        body {
            margin: 0;
            }

        .wrapper {
            display: grid;
            grid-template-columns: 20% 20% 20% 20% 20%;
            background-color: #fff;
            color: #444;
            position:relative;
            }

        .box {
            background-color: #444;
            color: #fff;
            padding: 20px;
            font-size: 150%;
            height: 100vh;
            position:relative;
            }

         .a {
            grid-column: 1 / span 5;
            background-color:white;
            text-align: center;
             background-image: linear-gradient(to right, pink , lightpink);  
             position:relative;

            }

        .b {
            grid-column: 1/ span 5;
            height:20vh;
            background-color: #e6175b;
        }

        .c {
             grid-column: span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;

        }

        .d {

            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;
        }

        .e {
            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;grid-column:  span 1;
            text-align:center;
        }

         .f {
            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;grid-column:  span 1;
            text-align:center;
        }

         .g {

            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;

        }





        h1{
            font-family: antarctican-headline, sans-serif;
            font-weight: 300;
            font-style: normal;
            color: black;
            font-size: 10vmin;
            margin: 0;
            padding: 0;
            line-height: 100vh;


        }

        h2{
            font-family: antarctican-headline, sans-serif;
            font-weight: 400;
            font-style: normal;
            color: white;
            font-size: 3vmin;
            margin: 0;
            padding: 0;
            line-height: 20vh;
            letter-spacing: 1px;
        }

        .dot {
            height: 25px;
            width: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            padding: 0;
            margin:0;
            line-height:10vh;
            position:relative;


            }

        #myDIV {

            grid-column: span 5;
            background-color: lightpink;


        }

        #video{

            grid-column: span 5;

        }

        .ytvid{
           display:none;
        }

        .button {
            background-color: white;
            border: none;
            padding: 16px 32px;
            text-align: center;
            opacity: 0.6;
            transition: 0.3s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            font-family: antarctican-headline, sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #e6175b;
            font-size: 3vmin;
            margin: 0;
            padding: 0;
            line-height: 10vh;
            letter-spacing: 1px;
                }

        .button:hover {
             background-color: pink;

        }



    </style>
</head>

<body>

    <div class="wrapper">
        <div class="box a"><h1> 
                    <span style='color: #e6175b'>C</span>
                    <span style='color: #be1e68'>H</span>
                    <span style='color: #9e226e'>R</span>
                    <span style='color: #8f2575'>O</span>
                    <span style='color: #522e87'>M</span>
                    <span style='color: #32358f'>E</span>
                    <span style='color: #32358f'>S</span>
                    <span style='color: #32358f'>T</span>
                    <span style='color: #522e87'>H</span>
                    <span style='color: #8f2575'>E</span>
                    <span style='color: #9e226e'>S</span>
                    <span style='color: #be1e68'>I</span>
                    <span style='color: #e6175b'>A</span>

            </h1></div>
        <div class="box b"><h2>: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.</h2></div>
        <div class="box c"> <span class="dot"></span></div>
        <div class="box d"><span class="dot"></span></div>
        <div class="box e"><span class="dot"></span></div>
        <div class="box f"><span class="dot"></span></div>
        <div class="box g"><span class="dot"></span></div>
        <button class="button" id="video"onclick="myFunction()">click me</button>

    </div>

    <script>

    function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }

    </script>
</body>

我希望當網頁加載時，.ytvid div 將被隱藏，直到有一個按鈕點擊。

3 個解決方案

解決方案1
 3 已采納  2019-10-28 02:05:43

這是針對這種情況的基本設置，不包括jQuery ： 

 function toggleDisplay() { const ytvid = document.querySelector('.ytvid'); ytvid.style.display = ytvid.style.display === 'block'? 'none': 'block'; }
 .ytvid { display: none; }
 <button onclick="toggleDisplay()">click me</button> <div class="ytvid">ytvid</div>

解決方案2
 0  2019-10-28 02:12:43

 function myFunction() { var div = document.getElementById('myDiv'); div.style.display = div.style.display === 'block'? 'none': 'block'; } $('#btn2').on('click', function() { $('#myDiv').toggle(); })
 #myDiv { display: none; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myDiv">content</div> <button class="button" onclick="myFunction()">Via native Js </button> <button id="btn2" class="button">Via jquery</button>

這是隱藏和顯示的兩種方式，分別通過原生js和jquery。

解決方案3
 0  2019-10-28 06:12:37

  <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
          $("#contatiner").css("visibility", "hidden");
    });
    function myFunction() {
        $("#contatiner").css("visibility", "visible");

    }
</script>

<div class="wrapper" id="contatiner">
   <div class="box a"><h1> 
                <span style='color: #e6175b'>C</span>
                <span style='color: #be1e68'>H</span>
                <span style='color: #9e226e'>R</span>
                <span style='color: #8f2575'>O</span>
                <span style='color: #522e87'>M</span>
                <span style='color: #32358f'>E</span>
                <span style='color: #32358f'>S</span>
                <span style='color: #32358f'>T</span>
                <span style='color: #522e87'>H</span>
                <span style='color: #8f2575'>E</span>
                <span style='color: #9e226e'>S</span>
                <span style='color: #be1e68'>I</span>
                <span style='color: #e6175b'>A</span>
    </h1></div>
    <div class="box b"><h2>: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.</h2></div>
    <div class="box c"> <span class="dot"></span></div>
    <div class="box d"><span class="dot"></span></div>
    <div class="box e"><span class="dot"></span></div>
    <div class="box f"><span class="dot"></span></div>
    <div class="box g"><span class="dot"></span></div>
   </div>
   <button class="button" id="video" onclick="myFunction();return false;">click me</button>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何隱藏標簽，直到單擊“提交”按鈕？ 在HTML中單擊所有元素之前，如何隱藏按鈕？ 隱藏“清除”按鈕，直到單擊“應用”按鈕 Javascript隱藏DIV，單擊按鈕 如何在按鈕單擊時顯示隱藏的div並隱藏Angular 2中單擊的按鈕？ 隱藏錯誤文本，直到單擊框/按鈕 textarea隱藏提交按鈕，直到單擊？ 隱藏表單直到單擊按鈕 - Ruby on Rails 單擊按鈕時如何顯示 div 內容並隱藏其他內容 - JavaScript 單擊relevent按鈕時如何隱藏relevent div
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM