[英]How can I update url with hashchange within tabs by using Javascript
I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. 我想让我的页面显示URL中的当前选项卡,请记住我还在学习,所以我的编码技能不是最好的。 I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
我通常会为此使用PHP,但是有人要求我坚持使用Javascript / JQuery。
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script. 到目前为止,我已经设法通过简单的脚本使选项卡在div中动态显示内容。
This is my index bit: 这是我的索引位:
<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>
This is my script: 这是我的脚本:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. 理想情况下,我宁愿不要将所有内容都塞进一页。 I've checked many similar questions/videos, but I can't really find the missing bit.
我检查了许多类似的问题/视频,但我找不到真正的缺失之处。
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL. 我的问题确实是我该如何编写一个脚本来完成显示URL上当前标签的额外工作。
Here this thing can be done using iframe which works well, but as you suggested i have tried it. 在这里,可以使用效果很好的iframe来完成此操作,但是正如您所建议的,我已经尝试过了。 here is my code.
这是我的代码。 reference same as you gave before.
参考与您之前提供的相同。
Now i am showing code here use js in this manner: 现在我在这里显示代码,以这种方式使用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>
and html code with " <div>
" tag. 和带有“
<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>
i have also used jquery.min.js and blocjUI.js and css css code is here 我也用过jquery.min.js和blocjUI.js和CSS CSS代码在这里
<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;
}
and you will get two different page in one page. 您将在一页中得到两个不同的页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.