jquery 面包屑導(dǎo)航 具體實(shí)現(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左側(cè)導(dǎo)航欄</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代表頁面中點(diǎn)擊的元素
$(".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">權(quán)限管理</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左側(cè)導(dǎo)航欄</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代表頁面中點(diǎn)擊的元素
$(".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">權(quán)限管理</a>
<ul>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
<li>
<a href="#" target="rightFrame">暫未開放</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
- JQuery實(shí)現(xiàn)電梯導(dǎo)航特效
- jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊
- jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- 簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- 使用jquery庫實(shí)現(xiàn)電梯導(dǎo)航效果
相關(guān)文章
基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
由于ajax的獨(dú)特優(yōu)勢(shì)，使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用，下面就介紹一下ajax如何調(diào)用后臺(tái)定義的函數(shù)，對(duì)ajax調(diào)用后臺(tái)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了jquery獲取tr并更改tr內(nèi)容示例代碼,需要的朋友可以參考下2014-02-02
jQuery Dialog對(duì)話框事件用法實(shí)例分析
這篇文章主要介紹了jQuery Dialog對(duì)話框事件用法,結(jié)合實(shí)例形式分析了Dialog對(duì)話框?qū)崿F(xiàn)的靜態(tài)提示類對(duì)話框、動(dòng)態(tài)提示類對(duì)話框以及遮罩類對(duì)話框的概念、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05
CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jquery mobile changepage的三種傳參方法介紹
本來覺得changePage 那么多option,傳幾個(gè)參數(shù)應(yīng)該沒問題結(jié)果翻遍國內(nèi)外網(wǎng)站,基本方法只有三種，下面與大家分享下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05
使用jquery獲取網(wǎng)頁中圖片的高度其實(shí)很簡單，目前有兩種不錯(cuò)的方法可以實(shí)現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下2013-09-09
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能【附j(luò)sencrypt.js下載】
這篇文章主要介紹了jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能,結(jié)合具體實(shí)例形式分析了js使用jsencrypt.js插件前端字符數(shù)據(jù)處理傳輸及C#后臺(tái)數(shù)據(jù)轉(zhuǎn)換與RSA加密相關(guān)操作技巧,并附帶jsencrypt.js供讀者下載參考使用,需要的朋友可以參考下2017-06-06