[英]How can I update url with hashchange within tabs by using Javascript
我想讓我的頁面顯示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來完成此操作,但是正如您所建議的,我已經嘗試過了。 這是我的代碼。 參考與您之前提供的相同。
現在我在這里顯示代碼,以這種方式使用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和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;
}
您將在一頁中得到兩個不同的頁面。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.