更改每个不同Tab的窗口的URL [英] Change URL of the windows for every different Tab

问题描述

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

I have a single page html code with 3 different Tabs in that.I have a requirement of chaining the URL for each tab.

我看过一些资源使用 windows.history.pushState（）更改浏览器历史记录。但据我所知，它只会随着＃extra-path 。

I have seen some resources for changing the browser history using windows.history.pushState().But as far as I know It only changes changing with #extra-path.

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

But I am trying to achieve something like:

for tab1 .. mybasedomain.com/tab1

for tab1 .. mybasedomain.com/tab1

for tab2 .. mybasedomain.com/tab2

for tab2 .. mybasedomain.com/tab2

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

How do I achieve it?Can I achieve it using 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>

推荐答案

尝试使用 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>

这篇关于更改每个不同Tab的窗口的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！