代码之家 › 专栏 › 技术社区 › user8512043

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

jquery javascript

user8512043 · 技术社区 · 6 年前

我正在尝试创建一个功能,其中顶部将有多个链接,默认情况下,内容将与标题加载在同一页上。链接和标题将是相关的,所以点击链接,将重定向到特定的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>

0 回复 | 直到 6 年前

Learner 6 年前

希望下面的片段能对你有所帮助

$(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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前