jquery 面包屑導航 具體實現(xiàn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YanCms左側導航欄</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//#title代表頁面中點擊的元素
$(".title").click(function () {
var con = $(this).html();
//#getTitle代表頁面中想要得到title的值元素
$("#getTitle").html(con);
//$(this).attr('href')獲取超鏈接
var con1 = $(this).attr('href');
// $("#getTitle").attr("href", "con1");
// alert(con1);
});
});
</script>
<script type="text/javascript">
jQuery().ready(function () {
jQuery("#navigation").accordion({
header: '.head',
event: 'click',
fillSpace: true,
animated: 'bounceslide'
});
});
</script>
<link href="css/left.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#e6f4fa;" >
<div class="subMenuTitle" id="getTitle"><a href="#">主功能菜單</a></div>
<div style="height:100%;">
<ul id="navigation">
<li>
<a class="head">類別管理</a>
<ul>
<li class="title">
<a href="#1233333" >博文列表</a>
</li>
<li class="title">
<a href="#">添加博文</a>
</li>
</ul>
</li>
<li>
<a class="head">類別管理</a>
<ul>
<li>
<a href="#" target="rightFrame"> 類別列表</a>
</li>
</ul>
</li>
<li>
<a class="head">友情鏈接</a>
<ul>
<li>
<a href="#" target="rightFrame"> 鏈接列表</a>
</li>
<li>
<a href="#" target="rightFrame">添加鏈接</a>
</li>
</ul>
</li>
<li>
<a class="head">系統(tǒng)管理</a>
<ul>
<li>
<a href="#" target="rightFrame">修改管理員密碼</a>
</li>
</ul>
</li>
<li>
<a class="head">權限管理</a>
<ul>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YanCms左側導航欄</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//#title代表頁面中點擊的元素
$(".title").click(function () {
var con = $(this).html();
//#getTitle代表頁面中想要得到title的值元素
$("#getTitle").html(con);
//$(this).attr('href')獲取超鏈接
var con1 = $(this).attr('href');
// $("#getTitle").attr("href", "con1");
// alert(con1);
});
});
</script>
<script type="text/javascript">
jQuery().ready(function () {
jQuery("#navigation").accordion({
header: '.head',
event: 'click',
fillSpace: true,
animated: 'bounceslide'
});
});
</script>
<link href="css/left.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#e6f4fa;" >
<div class="subMenuTitle" id="getTitle"><a href="#">主功能菜單</a></div>
<div style="height:100%;">
<ul id="navigation">
<li>
<a class="head">類別管理</a>
<ul>
<li class="title">
<a href="#1233333" >博文列表</a>
</li>
<li class="title">
<a href="#">添加博文</a>
</li>
</ul>
</li>
<li>
<a class="head">類別管理</a>
<ul>
<li>
<a href="#" target="rightFrame"> 類別列表</a>
</li>
</ul>
</li>
<li>
<a class="head">友情鏈接</a>
<ul>
<li>
<a href="#" target="rightFrame"> 鏈接列表</a>
</li>
<li>
<a href="#" target="rightFrame">添加鏈接</a>
</li>
</ul>
</li>
<li>
<a class="head">系統(tǒng)管理</a>
<ul>
<li>
<a href="#" target="rightFrame">修改管理員密碼</a>
</li>
</ul>
</li>
<li>
<a class="head">權限管理</a>
<ul>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
相關文章
基于JavaScript如何實現(xiàn)ajax調用后臺定義的方法
由于ajax的獨特優(yōu)勢，使得它在當前大量網站得到了廣泛的應用，下面就介紹一下ajax如何調用后臺定義的函數(shù)，對ajax調用后臺方法相關知識感興趣的朋友一起學習吧2015-12-12
這篇文章主要介紹了jquery獲取tr并更改tr內容示例代碼,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jQuery Dialog對話框事件用法,結合實例形式分析了Dialog對話框實現(xiàn)的靜態(tài)提示類對話框、動態(tài)提示類對話框以及遮罩類對話框的概念、使用方法與相關注意事項,需要的朋友可以參考下2016-05-05
CSS3 media queries結合jQuery實現(xiàn)響應式導航
這篇文章主要為大家詳細介紹了CSS3 media queries結合jQuery實現(xiàn)響應式導航,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
jquery mobile changepage的三種傳參方法介紹
本來覺得changePage 那么多option,傳幾個參數(shù)應該沒問題結果翻遍國內外網站,基本方法只有三種，下面與大家分享下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery實現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈式操作的相關技巧,非常簡單實用,需要的朋友可以參考下2015-05-05
使用jquery獲取網頁中圖片的高度其實很簡單，目前有兩種不錯的方法可以實現(xiàn)，下面為大家詳細介紹下，有所疑惑的你可以參考下2013-09-09
這篇文章主要為大家詳細介紹了jquery實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
jQuery+C#實現(xiàn)參數(shù)RSA加密傳輸功能【附jsencrypt.js下載】
這篇文章主要介紹了jQuery+C#實現(xiàn)參數(shù)RSA加密傳輸功能,結合具體實例形式分析了js使用jsencrypt.js插件前端字符數(shù)據(jù)處理傳輸及C#后臺數(shù)據(jù)轉換與RSA加密相關操作技巧,并附帶jsencrypt.js供讀者下載參考使用,需要的朋友可以參考下2017-06-06