gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:04:02 25 4
gpt4 key购买 nike

我有一个包含 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>

最佳答案

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

关于javascript - 为每个不同的选项卡更改窗口的 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33361536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com