javascript - 为每个不同的选项卡更改窗口的 URL

Question

我有一个包含 3 个不同选项卡的单页 html 代码。我需要为每个选项卡链接 URL。

我已经看到一些使用 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>