亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

單擊鏈接并重定向到該內容

單擊鏈接并重定向到該內容

慕碼人2483693 2023-01-06 15:22:10
我正在嘗試創建一個功能,其中頂部將有多個鏈接,并且默認情況下將在同一頁面中加載內容和標題。鏈接和標題將相關,因此單擊鏈接將重定向到具有效果的特定 div(類似于單頁應用程序)。例子:Vision Mission Address ContactVisionContent here MissionContent here AddressContent here ContactContent here 我不確定我是怎么做到的,但創建了一個實際上不相似的樣本,可以說是一個試驗。這不是我想要的:$(document).ready(function(){  $(".subcontent").hide();  $('#myMenu').on('click','a',function()  {    $('.subcontent:visible').hide();    $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><ul id="myMenu">  <li><a href="#" data-id="Vision">Vision</a></li>  <li><a href="#" data-id="Mission">Mission</a></li></ul><section class="subcontent"  id="Vision" style="display:block" >  <div class="page-heading">     <h1 class="caption">Vision</h1>  </div></section><section class="subcontent"  id="Mission" >  <div class="page-heading">     <h1 class="caption">Mission</h1>  </div></section>
查看完整描述

1 回答

?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

希望下面的片段能幫到你


$(document).ready(function () {

  $('.top').click(function() {

  $('html, body').animate({

    scrollTop: $(".top-section").offset().top

  }, 1000)

}), 

  $('.middle').click(function (){

    $('html, body').animate({

      scrollTop: $(".middle-section").offset().top

    }, 1000)

  }),

  $('.bottom').click(function (){

    $('html, body').animate({

      scrollTop: $(".bottom-section").offset().top

    }, 1000)

  })

  

 $('.top-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })

 $('.middle-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })


  $('.bottom-section').click(function (){

    $('html, body').animate({

      scrollTop: 0

    }, 1000)

  })

});

body,

html {

  width: 100%;

  height: 100%;

  margin: 0;

  display: inline;

}


.top-section {

  background-color: green;

  height: 100%;

  width: 100%;

  display: flex;

}


.middle-section {

  background-color: yellow;

  height: 100%;

  width: 100%;

  display: flex;

}


.bottom-section {

  background-color: red;

  height: 100%;

  width: 100%;

  display: flex;

}

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

<div>

    <h4>Click on Top,Middle.Bottom will take to the section,Click on Click on section will take to the Top</h4>

    

    <h5 class="top">Top</h5> 

    <h5 class="middle">Middle</h5> 

    <h5 class="bottom">Bottom</h5>

</div>

<div class="top-section">

    <h1>Top Section</h1>

</div>

<div class="middle-section">

    <h1>Middle Section</h1>

</div>

<div class="bottom-section">

    <h1>Bottom Section</h1>

</div>


查看完整回答
反對 回復 2023-01-06
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號