私は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>