簡體   English   中英

需要幫助淡出div

[英]Need help for fadeout the div

我正在嘗試使用提供的js函數淡入/淡出有關div的類。 但是此方法不起作用,我需要一些解決此問題的方法。 您的解決方案將不勝感激。

ASPX文件:

<body>
 <form id="form1" runat="server" >
 <div>
    <input class="btn1" type="button" value="button" />
    <input class="btn2" type="button" value="button" />

    <div class="about" runat="server" >
        <div class="style2">
            <strong><span class="style3">About</span></strong>
         </div>
         <hr />
         <p class="style2">
            About DIV
         </p>
     </div>
   </div>
</form>

JAVA腳本文件

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn1").click(function () {
            $(".about").fadeOut()
        });
        $(".btn2").click(function () {
            $(".about").fadeIn();
        });
    });
</script>

確保您正在導入jQuery

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

看看這個例子http://jsfiddle.net/3Lbjx249/

需要幫助跨越<div>一行中的元素</div><div id="text_translate"><p>我想要這個網站: <a href="https://www.petzl.com/INT/en" rel="nofollow noreferrer">https://www.petzl.com/INT/en</a></p><p> 我想在一行或一行中顯示具有 3 個 div“服務”“培訓”和“商店”的中心文本。</p><p> 我嘗試了內聯塊、填充、邊距、浮動等,但也許我做錯了什么。</p><p> 如果我不使用這一行“place-content:center;” 它把它放在左邊有很多空間。</p><p> 我的網站鏈接:beta.edgrope.com</p><p> 請在下面找到代碼: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;style&gt;.image{ height: 800px; width: 100%; display: grid; place-content:center; justify-content:middle; color: white; font-size:30px; background-color: #; background-position: center; background-size: cover; }.training{ display:inline-block; padding-top: 50px; padding-right: 1500px; padding-bottom: 50px; padding-left: 1px; }.image&gt;div { display: inline-block; width: 100px; }.image&gt;div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; display: inline-block; }.image&gt;div span { position: relative; z-index: 1; cursor: pointer; display: inline-block; }.image&gt;div span:hover+img { opacity: 1; display: inline-block; }.div{ dipslay } &lt;/style&gt; &lt;div class="image"&gt; &lt;div class="services"&gt; &lt;span class="services" onclick="window.location=''"&gt;Services&lt;/span&gt; &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; &lt;/div&gt; &lt;div class="Training"&gt; &lt;span class="training" onclick="window.location='beta.edgerope.com/courses'"&gt;Training&lt;/span&gt; &lt;img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"&gt; &lt;/div&gt; &lt;div class="shop"&gt; &lt;span class="shop" onclick="window.location='beta.edgerope.com/shop'"&gt;Shop&lt;/span&gt; &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p><p> :</p></div>

[英]Need help to span <div> elements in one row

暫無
暫無

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

相關問題 如何循環淡出需要更改div img 需要幫助使基本.fadeIn()/。fadeOut()滑塊的jQuery循環 需要幫助顯示div懸停 控制div的淡出和淡入 在 div 上創建淡出效果 Onclick 淡出 div Fadeout每個div分開 在同一個div中淡出淡出 淡出前置div 需要幫助跨越<div>一行中的元素</div><div id="text_translate"><p>我想要這個網站: <a href="https://www.petzl.com/INT/en" rel="nofollow noreferrer">https://www.petzl.com/INT/en</a></p><p> 我想在一行或一行中顯示具有 3 個 div“服務”“培訓”和“商店”的中心文本。</p><p> 我嘗試了內聯塊、填充、邊距、浮動等,但也許我做錯了什么。</p><p> 如果我不使用這一行“place-content:center;” 它把它放在左邊有很多空間。</p><p> 我的網站鏈接:beta.edgrope.com</p><p> 請在下面找到代碼: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;style&gt;.image{ height: 800px; width: 100%; display: grid; place-content:center; justify-content:middle; color: white; font-size:30px; background-color: #; background-position: center; background-size: cover; }.training{ display:inline-block; padding-top: 50px; padding-right: 1500px; padding-bottom: 50px; padding-left: 1px; }.image&gt;div { display: inline-block; width: 100px; }.image&gt;div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; display: inline-block; }.image&gt;div span { position: relative; z-index: 1; cursor: pointer; display: inline-block; }.image&gt;div span:hover+img { opacity: 1; display: inline-block; }.div{ dipslay } &lt;/style&gt; &lt;div class="image"&gt; &lt;div class="services"&gt; &lt;span class="services" onclick="window.location=''"&gt;Services&lt;/span&gt; &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; &lt;/div&gt; &lt;div class="Training"&gt; &lt;span class="training" onclick="window.location='beta.edgerope.com/courses'"&gt;Training&lt;/span&gt; &lt;img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"&gt; &lt;/div&gt; &lt;div class="shop"&gt; &lt;span class="shop" onclick="window.location='beta.edgerope.com/shop'"&gt;Shop&lt;/span&gt; &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p><p> :</p></div>
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM