gpt4 book ai didi

javascript - 如何使用 Javascript 在选项卡内使用 hashchange 更新 url

转载 作者:行者123 更新时间:2023-12-01 03:03:55 25 4
gpt4 key购买 nike

我想让我的页面显示 URL 中的当前选项卡,请记住我仍在学习中,所以我的编码技能不是最好的。我通常会使用 PHP 来完成此任务,但我被要求坚持使用 Javascript/JQuery。

到目前为止,我已经成功使用一个简单的脚本让我的选项卡在 div 中动态显示内容。

这是我的索引位:

<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
<a href="#lefttabs" aria-expanded="false" data-toggle="collapse">Menu<i class="fa fa-angle-down"></i></a>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>

这是我的脚本:

$(document).ready(function(){
$("#content").load("pages/first.html");
});

$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});

理想情况下,我不希望将所有内容都塞进一页。我检查了很多类似的问题/视频,但我无法真正找到缺失的部分。

我的问题实际上是我应该如何编写一个脚本来执行在 URL 上显示当前选项卡的额外操作。

最佳答案

这里可以使用 iframe 来完成这件事,效果很好, 但正如你所建议的,我已经尝试过。这是我的代码。 reference和你之前给的一样。

现在我在这里显示代码以这种方式使用js:

<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>

以及带有“<div> ”标签的 html 代码。

<ul id="tabs">
<li><a href="#first">TAb1</a></li>
<li><a href="#second">TAb2</a></li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>

我还使用了 jquery.min.js 和 blocjUI.js 以及 cssCSS代码在这里

<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}

您将在一页中看到两个不同的页面。

屏幕1: first.html shown

屏幕2: second.html shown

关于javascript - 如何使用 Javascript 在选项卡内使用 hashchange 更新 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46317493/

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