Question

我有一个单页的html代码，其中包含3个不同的标签。我需要链接每个标签的网址。

我已经看到了一些使用windows.history.pushState()更改浏览器历史记录的资源。但据我所知，它只会随#extra-path更改。

但我正在努力实现以下目标：

for tab1 .. mybasedomain.com/tab1

for tab2 .. mybasedomain.com/tab2

我如何实现它？我可以使用JavaScript，jQuery实现吗？

我的代码结构：

<section id="features">
    <header>
        <div class="features-switcher">
            <div class="container">
                <ul class="tab-links">
                    <li>
                        <a class="active" href="#tab1">
                            <span>tab one</span>
                        </a>
                    </li>
                    <li >
                        <a class="" href="#tab2">
                            <span>tab two</span>
                        </a>
                    </li>
                    <li>
                        <a class="" href="#tab3">
                            <span>tab three</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <hr>
    </header>
    <div class="tab-content">
    <div id="tab1" class="tab--active">
        <section class="container">
            <h2> content of tab 1</h2>
        <hr>
        </section>
    </div>
    <div id="tab2" class="tab--inactive">
        <section class="container">
            <h2> content of tab 2</h2>
        </section>
    </div>
    <div id="tab3" class="tab--inactive">
        <section class="container">
            <h2> content of tab 3</h2>
        </section>
    </div>
    </div>
</section>

Answer 1

尝试使用history.replaceState()

$(".tab-links a").click(function(e) {
  var active = this.href.slice(-5)
  , link = active.slice(1);
  console.log(active, link)
  $(".tab-content [id^=tab]").hide();
  $(active).show();
  history.replaceState(null, link
    , location.href.slice(-1) === "/" 
    ? location.href + "/" + link 
    : link
  )
})

.tab--inactive {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="features">
  <header>
    <div class="features-switcher">
      <div class="container">
        <ul class="tab-links">
          <li>
            <a class="active" href="#tab1">
              <span>tab one</span>
            </a>
          </li>
          <li>
            <a class="" href="#tab2">
              <span>tab two</span>
            </a>
          </li>
          <li>
            <a class="" href="#tab3">
              <span>tab three</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr>
  </header>
  <div class="tab-content">
    <div id="tab1" class="tab--active">
      <section class="container">
        <h2> content of tab 1</h2>
        <hr>
      </section>
    </div>
    <div id="tab2" class="tab--inactive">
      <section class="container">
        <h2> content of tab 2</h2>
      </section>
    </div>
    <div id="tab3" class="tab--inactive">
      <section class="container">
        <h2> content of tab 3</h2>
      </section>
    </div>
  </div>
</section>

更改每个不同标签

1 个答案: