第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

隱藏和顯示 div 元素?zé)o法正常工作

隱藏和顯示 div 元素?zé)o法正常工作

猛跑小豬 2023-10-17 16:09:08
我有一個side menu,里面有兩個buttons。默認(rèn)情況下,我想查看 的內(nèi)容profile div(現(xiàn)在可以使用),但是當(dāng)單擊 上的My reviews按鈕時sidebar,我想隱藏 的內(nèi)容 profile div并顯示review div。但這不起作用。我有以下代碼:<nav class="side-menu">    <div class="col-xs-3">      <ul class="nav nav-tabs tabs-left">        <li class="active">         <button id="profilebtn" type="submit">         <a href="#profile">Profile</a>         </button>        </li>        <li >                        <form action="/findUserReviews" method="POST">         <button id="reviewbtn" type="submit" class="">         <a href="#review"></a>My Review</button>         </form>        </li>     </ul>   </div></nav><div id="review" >  <table>   <tbody>        <tr th:each="review: ${reviews}">          <form th:action="@{/edit_review}" method="post">          <td class="underline font-weight-bold"            th:text="${review.place.id}" />          <td>            <button type="submit" class="edit" name="action"            value="edit">Edit</button>          </td>         </form>       </tr>    </tbody>  </table></div><div id="profile" >    <form class="form-horizontal" th:action="@{/edit_profile}">        <fieldset class="fieldset">            <h3 class="fieldset-title">Personal Info</h3>            ...        </fieldset>                                 </form></div>這是我的jquery代碼:    <script >            $(document).ready(function(){                 $("#reviewbtn").click(function() {                   $("#profile").hide();                   $("#review").show();                  });                })    </script>我得到的是profile默認(rèn)情況下的 div,這是預(yù)期的,但是當(dāng)我單擊My review按鈕時,我會在我可以看到的 div 的結(jié)果之上看到該 div 的結(jié)果profile。當(dāng)我單擊按鈕時profile,我再次看到該 profile div元素的結(jié)果,但它跳到了上面一點(diǎn)。我實(shí)際上想在頁面的同一位置查看結(jié)果,只是內(nèi)容必須根據(jù)單擊的按鈕進(jìn)行更改。任何幫助表示贊賞。
查看完整描述

2 回答

?
阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個贊

我使用CSS顯示并且它有效。注意:我將 reviewbtn 類型更改為按鈕,因?yàn)樗翘峤活愋筒⑶宜趪L試提交某些內(nèi)容。如果你只是需要它來運(yùn)行 JS,則不能使用提交按鈕。


還更改了個人資料按鈕,以便您可以后退和前進(jìn)以進(jìn)行演示。


$(document).ready(function(){

                 $("#reviewbtn").click(function() {

                   $("#profile").css("display", "none");

                   $("#review").css("display", "block"); 

                 });

                 

                 $("#profilebtn").click(function() {

                   $("#profile").css("display", "block");

                   $("#review").css("display", "none"); 

                 });

                 

                  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="side-menu">

    <div class="col-xs-3">

      <ul class="nav nav-tabs tabs-left">

        <li class="active">

         <button id="profilebtn" type="button">

         <a href="#profile">Profile</a>

         </button>

        </li>

        <li >               

         <form action="/findUserReviews" method="POST">

         <button id="reviewbtn" type="button" class="">

         <a href="#review"></a>My Review</button>

         </form>

        </li>

     </ul>

   </div>

</nav>


<div id="review" style="display:none">

  <table>

   <tbody>

        <tr th:each="review: ${reviews}">

          <form th:action="@{/edit_review}" method="post">

          <td class="underline font-weight-bold"

            th:text="${review.place.id}" />

          <td>

            <button type="submit" class="edit" name="action"

            value="edit">Edit</button>

          </td>

         </form>

       </tr>

    </tbody>

  </table>

</div>

<div id="profile" style="display:block">

    <form class="form-horizontal" th:action="@{/edit_profile}">

        <fieldset class="fieldset">

            <h3 class="fieldset-title">Personal Info</h3>

            ...

        </fieldset>                             

    </form>

</div>


查看完整回答
反對 回復(fù) 2023-10-17
?
小怪獸愛吃肉

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個贊

因此,在其他情況下,您必須將 divposition: absolute和父元素都設(shè)置為position: relative. 這樣兩個 div 就會相互堆疊。但由于您使用的是hide()哪些集合,display: none所以它們不使用任何空間。


如果更改 div 的內(nèi)容,我建議您將兩者都放在 div 中。


我不太確定這個代碼片段是否是您想要的,請告訴我您是否需要更多。


$("#reviewbtn").click(function() {

  $("#profile").hide();

  $("#review").show();

});


$("#profilebtn").click(function() {

  $("#review").hide();

  $("#profile").show();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="profilebtn" type="submit" class=""><a href="#review"></a>Profile</button>

<button id="reviewbtn" type="submit" class=""><a href="#review"></a>My Review</button>


<div id="SomeWrapper">

    <div id="review" style="display: none; background: red;">

        This is a review div

    </div>

    <div id="profile" style="display: block; background: blue;">

        This is a profile div

    </div>

</div>


查看完整回答
反對 回復(fù) 2023-10-17
  • 2 回答
  • 0 關(guān)注
  • 198 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號