<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>director.js</title>
<style type="text/css">
.test { 100px;height: 100px;}
span {cursor: pointer;}
</style>
</head>
<body>
<ul>
<li><a href="#/author">#/author</a></li>
<li><a href="#/books">#/books</a></li>
<li><span href="#/books/view/1_1">#/books/view/1</span></li>
<li><span href="#/books/view/2_2">#/books/view/2</span></li>
<li><span href="#/books/view/3_3">#/books/view/3</span></li>
<li><a href="https://www.baidu.com/?tn=47018152_dg">百度</a></li>
<div class="test"></div>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/Director/1.2.8/director.js"></script>
<script>
var author = function () {
//console.log("author");
$('.test').css({background:'green'});
};
var books = function () {
//console.log("books");
$('.test').css({background:'pink'});
};
var viewBook = function (bookId) {
//console.log("viewBook: bookId is populated: " + bookId);
var id = bookId.split('_')[0];
var tid = bookId.split('_')[1];
if (id == 1) {
$('.test').css({background:'gold'});
console.log(tid);
} else if (id == 2) {
$('.test').css({background:'#dddddd'});
console.log(tid);
} else if (id == 3) {
$('.test').css({background:'blue'});
console.log(tid);
}
};
$('span').on('click', function() {
var temp = location.href.split('#')[0];
location.href = temp + $(this).attr('href');
});
var routes = {
'/author': author,
'/books': [books, function() {
console.log("An inline route handler.");
}],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
</script>
</body>
</html>
通过js控制跳转：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/Director/1.2.8/director.min.js"></script>
<script>
$('document').ready(function() {
//
// create some functions to be executed when
// the correct route is issued by the user.
//
var showAuthorInfo = function () { console.log("showAuthorInfo"); };
var listBooks = function () { console.log("listBooks"); };
var allroutes = function() {
var route = window.location.hash.slice(2);
var sections = $('section');
var section;
section = sections.filter('[data-route=' + route + ']');
if (section.length) {
sections.hide(250);
section.show(250);
}
};
//
// define the routing table.
//
var routes = {
'/author': showAuthorInfo,
'/books': listBooks
};
//
// instantiate the router.
//
var router = Router(routes);
//
// a global configuration setting.
//
router.configure({
on: allroutes
});
router.init();
$('#m-author').on('click', function () {
window.location = '#/author';
});
$('#m-books').on('click', function () {
window.location = '#/books';
});
});
</script>
</head>
<body>
<section data-route="author">Author Name</section>
<section data-route="books">Book1, Book2, Book3</section>
<ul>
<li><a href="javascript:;" id="m-author">author</a></li>
<li><a href="javascript:;" id="m-books">books</a></li>
</ul>
</body>
</html>