jQuery-动态面包屑 [英] jquery - dynamic breadcrumb
本文介绍了jQuery-动态面包屑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用以下方法为我的网站创建一个面包屑系统:
<div class="breadcrumb">
<div class="item"><a href="#home">Home / </a></div>
</div>
<div class="items">
<ul>
<li><a href="#test1">Test 1</a></li>
<li><a href="#test1">Test 2</a>
<ul>
<li><a href="">Level 1</a></li>
<li><a href="">Level 2</a></li>
</ul>
</li>
<li><a href="#test1">Test 3</a></li>
</ul>
</div>
我要做的是,当用户单击Test 1
时,面包屑为Home / Test 1
;如果用户随后单击Test 2
,然后单击Level 1
,则面包屑将变为Home / Test 1 / Level 2
>
我一直在寻找jQuery来做到这一点,但不是100%地确定如何最好地实现它.
任何想法都将不胜感激
谢谢
解决方案
示例 http://jsfiddle.net/mPsez/3/
$('.items a').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone();
$bc.prepend(' / ', $a);
});
$('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
return false;
})
I'm trying to create a breadcrumb system for my site using the following:
<div class="breadcrumb">
<div class="item"><a href="#home">Home / </a></div>
</div>
<div class="items">
<ul>
<li><a href="#test1">Test 1</a></li>
<li><a href="#test1">Test 2</a>
<ul>
<li><a href="">Level 1</a></li>
<li><a href="">Level 2</a></li>
</ul>
</li>
<li><a href="#test1">Test 3</a></li>
</ul>
</div>
What I'm looking to do is so when a user clicks on Test 1
the breadcrumb is Home / Test 1
, if they then click on Test 2
and then Level 1
, the breadcrumb will become Home / Test 1 / Level 2
I've been looking at jQuery to do this, but not 100% sure how best to approach it.
Any ideas would be much appreciated
Thanks
解决方案
example http://jsfiddle.net/mPsez/3/
$('.items a').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone();
$bc.prepend(' / ', $a);
});
$('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
return false;
})
这篇关于jQuery-动态面包屑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文