链接到水平网页上的部分 [英] Link to a section on horizontal web page

问题描述

简短的介绍是，我创建了一个网站，其中有3个div在移动设备上水平放置（见下图），在Bootstrap的旋转木马的帮助下完成，并从 avinoamr的 repo：

问题现在是我试图通过单击顶部菜单上的Tab1，Tab2，Tab3按钮来添加功能，以使用href＃在同一页面上获得相应的div：：

 < li class =col-sm-4> < a href =＃tab2> Tab2< / a> < / li> 
  

... with divs like this one：

 < div id =tab2class =item active> 
< div class =col-sm-12 yellowid =yellow> 
< / div> 
< / div> 
  

...但由于某种原因，它不会触发跳转。任何想法？

您可以在这里看到原始语法：
https://jsfiddle.net/wmvx1p9t/2/

解决方案

只需使用 id 属性不会自动触发Bootstrap轮播更改位置。
轮播文档定义了您可以触发轮播卷动的两种方式：

• 通过数据属性：通过将数据幻灯片属性添加到选项卡锚点。您的标签页必须位于轮播< div> 内。


• 通过JavaScript ：您可以将点击事件监听器附加到标签锚点，并手动触发轮播以循环到相应的项目使用： $（'。carousel'）。carousel（number）

A short introduction is, I have created a website where I have 3 divs positioned horizontally on mobile devices (see image below), done with help from Bootstrap's carousel and a swipe function added on top from avinoamr's repo: https://github.com/avinoamr/bootstrap-carousel-swipe

Problem now is that I'm trying to add function by clicking the "Tab1", "Tab2", "Tab3" buttons on top-menu to get to the respective divs on the same page by using the href #:

<li class="col-sm-4"> <a href="#tab2">Tab2</a> </li>

...with divs like this one:

<div id="tab2" class="item active">
    <div class="col-sm-12 yellow" id="yellow">
    </div>
  </div>

...but for some reason it doesn't trigger the jump. Any idea?

You can see the original syntax here: https://jsfiddle.net/wmvx1p9t/2/

解决方案

Just using the id attribute will not automatically trigger the Bootstrap carousel to change position. The carousel documentation defines two ways you can trigger the carousel to scroll:

• Via data attributes: By adding the data-slide attribute to your tab anchors. Your tab anchors will have to be inside the carousel <div> for it to work.
• Via JavaScript: You can attach a click event listener to the tab anchors and manually trigger the carousel to cycle to the corresponding item by using: $('.carousel').carousel(number)

这篇关于链接到水平网页上的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！