javascript - 如何使用 Javascript 将用户带到特定的选项卡?

标签 javascript html css twitter-bootstrap tabs

当用户使用 Javascript 单击特定选项卡时,如何将用户从 html 页面带到特定的 html 选项卡页面?

我想创建一些东西,比如将一个特定选项卡从一个 html 页面链接到另一个 html 页面,这样当用户点击链接时,它将把他们带到特定的选项卡。

两个html都是分开的.html文件

这是我的Home.html页面代码

<style>
body {
  margin-top: 50px;
}

.box {
  border: 3px solid blue;
  height: 250px;
  width: 250px;
  margin: 20px 0;
}

.btn-success {
  margin: 200px 55px;
}

</style>

  </head>
  <body>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="box">
        <a href="" class="btn btn-success">LEARN MORE 1</a>
      </div>
</div>
<div class="col-md-4">
  <div class="box">
    <a href="" class="btn btn-success">LEARN MORE 2</a>
  </div>
</div>
<div class="col-md-4">
  <div class="box">
    <a href="" class="btn btn-success">LEARN MORE 3</a>
  </div>
</div>
<div class="col-md-4">
  <div class="box">
    <a href="" class="btn btn-success">LEARN MORE 4</a>
  </div>
</div>
<div class="col-md-4">
  <div class="box">
    <a href="" class="btn btn-success">LEARN MORE 5</a>
  </div>
</div>
<div class="col-md-4">
  <div class="box">
    <a href="" class="btn btn-success">LEARN MORE 6</a>
  </div>
</div>
</div>
    </div>

这是我的Service.html标签页代码

<div class="tab-content">
        <div id="LEARN-MORE-1" class="tab-pane fade in active">
          <h3>LEARN MORE 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="LEARN-MORE-2" class="tab-pane fade">
          <h3>LEARN MORE 2</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="LEARN-MORE-3" class="tab-pane fade">
          <h3>LEARN MORE 3</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="LEARN-MORE-4" class="tab-pane fade">
          <h3>LEARN MORE 4</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>

我没有 Javascript 知识,很抱歉没有在这里提供我的 Javascript 代码。我不知道如何创建 javascript 文件。

如何链接 html 页面并在使用单击“了解更多”按钮时将用户带到特定选项卡?

像这样:

this

非常感谢您的帮助!

最佳答案

如下在href中添加链接

 <a href="page_link#desired_tab_id">

关于javascript - 如何使用 Javascript 将用户带到特定的选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39406276/

相关文章:

html - CSS 的条件宽度

css - 如何使用 CSS 编写带有圆 Angular 和阴影的 3 边框(无左侧)?

javascript - 全局存储中的硬编码数据不会显示在 extjs 网格中

javascript - 需要通过 name 属性隐藏 <tr>

javascript - jquery closest 不想工作

javascript - 在用户键入时从输入字段中删除字符(keyup)

css - block 级可点击区域无法正常工作

javascript - 如何在没有捕捉的情况下自由移动后正确捕捉 jQuery UI 可拖动回到网格

html - 为响应式嵌入式视频添加边框

css - 大数据表溢出固定宽度的容器 - 我可以让容器扩展吗?