我找到了一种使用 summyjs 路由引导选项卡的方法，但它似乎与我看到的示例一致。我刚开始学习 summyjs，我不喜欢我是怎么做的，虽然它有效……这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="" content=""/>
<meta charset="UTF-8"/>
<link type="text/css" rel="stylesheet" href="Other/font-awesome-4.2.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="Other/bootstrap.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Lato', helvetica, arial, sans-serif;
font-size: 14px;
color: #222;
}
.clear {
clear: both;
}
body {
margin-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 style="padding-bottom: 20px;">Using Summyjs to route Bootstrap Tabs</h2>
<div class="navbar-header">
<a class="navbar-brand" data-toggle="" data-target="#bs-example-navbar-collapse-1" href="#">My Resume</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#home" data-toggle="tab">PERSONAL SUMMARY</a> </li>
<li><a href="#ios" data-toggle="tab">AREAS OF EXPERIENCE</a></li>
<li><a href="#jmeter" data-toggle="tab">CAREER SKILLS</a> </li>
<li><a href="#ejb" data-toggle="tab">PERSONAL DETAILS</a> </li>
</ul>
</div>
<div class="clear"></div>
<div style="padding-top: 20px;" id="myTabContent" class="tab-content">
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade in active" id="home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technoligies and explains each of the technology with simple examples. You also have a <b>tryit</b> editor, wherein you can edit your code and try out different possibilities of the examples.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="ios">
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the
OS X operating system used on Apple computers.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure
Java application for load and performance testing.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level
applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.
</p>
</div>
</div>
</div>
</body>
<script type='text/javascript' src="Other/jquery.js"></script>
<script type='text/javascript' src="Other/bootstrap.js"></script>
<script type="text/javascript" src="Other/summyjs/min/sammy-0.7.6.min.js"></script>
<script type="text/javascript">
//Update the URL with the current tabs hash
$("#myTab a").click(function () { location.hash = $(this).attr('href'); });
function ShowTab(tabname) {
//Show the selected tab
$('#myTab a[href="#' + tabname + '"]').tab('show');
}
// Client-side routes
Sammy(function () {
this.get('#:selectedtab', function () {
ShowTab(this.params.selectedtab);
});
//default to the first tab if there is no hash in the URL
this.get('', function () { this.app.runRoute('get', '#home') });
}).run();
</script>
</html>
帮助我学习 symmy 帮助我解决这个问题......我想要的是比下面的脚本更好地进行路由......
<script type="text/javascript">
//Update the URL with the current tabs hash
$("#myTab a").click(function () { location.hash = $(this).attr('href'); });
function ShowTab(tabname) {
//Show the selected tab
$('#myTab a[href="#' + tabname + '"]').tab('show');
}
// Client-side routes
Sammy(function () {
this.get('#:selectedtab', function () {
ShowTab(this.params.selectedtab);
});
//default to the first tab if there is no hash in the URL
this.get('', function () { this.app.runRoute('get', '#home') });
}).run();
</script>