【问题标题】:Hash anchor tag to a specific navigation tab将锚标记散列到特定的导航选项卡
【发布时间】:2013-01-20 21:57:39
【问题描述】:

如何在锚标签中使用散列来打开特定的导航选项卡?例如在我下面的代码中,我想在锚标签中使用哈希来打开我的第三个导航选项卡,但它没有跳到那里:(

<body>
   <div class="container">
      <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />

         <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
         <label for="tab-1" class="tab-label-1">Radio navigation tab 1</label>

         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
         <label for="tab-2" class="tab-label-2">Radio navigation tab 2</label>

         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
         <label for="tab-3" class="tab-label-3">Radio navigation tab 3</label>

         <div class="content">

            <a name="content-3" id="content-1"></a>
            <div class="content-1">
               <h1>Header 1</h1>
               <p>Hello world!</p>
            </div>

            <a name="content-3" id="content-2"></a>
            <div class="content-2">
               <h1>Header 2</h1>
               <p>Hello world!</p>
            </div>

            <a name="content-3" id="content-3"></a>
            <div class="content-3">
               <h1>Header 3</h1>
               <p>Hello world!</p>
            </div>

         </div>

      </section>
   </div>
</body>

我的网址例如:“www.example.com/#content-3”仍在打开第一个导航选项卡,所以我仍然很难知道如何让哈希锚标记跳转到另一个导航选项卡设置为默认选项卡的第一个选项卡,希望我能得到帮助,谢谢

【问题讨论】:

  • 你能发布你的css和js吗?
  • 我的 CSS 还没有准备好,因为我只用它来设置标签页的样式

标签: html tabs navigation hashtag


【解决方案1】:

首先像这样定义锚标签

  <a href="#main-slider">

然后将其重定向到特定区域

<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-16
    • 2018-07-12
    • 2013-02-27
    • 2012-06-04
    • 2020-02-18
    相关资源
    最近更新 更多