为了账号安全,请及时绑定邮箱和手机立即绑定

单击链接并重定向到该内容

单击链接并重定向到该内容

慕码人2483693 2023-01-06 15:22:10

我正在尝试创建一个功能,其中顶部将有多个链接,并且默认情况下将在同一页面中加载内容和标题。链接和标题将相关,因此单击链接将重定向到具有效果的特定 div(类似于单页应用程序)。例子:


Vision Mission Address Contact


Vision

Content here 


Mission

Content here 


Address

Content here 


Contact

Content 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贡献1586条经验 获得超4个赞

希望下面的片段能帮到你


$(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 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信