顯示菜單中的麪包屑痕跡

Question

我有一個全局菜單和本地菜單，用於products。我想在展示產品時突出顯示「我們的產品」鏈接，並在本地菜單中突出顯示該產品及其子頁面的名稱，以便高亮顯示的鏈接可用作麪包屑。我怎樣才能做到這一點與jQuery和Codeigniter或只是jQuery。 這裏是本地菜單的代碼：

<ul id="accordion"> 
<li class="pm"><h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2> 
<ul class="product_menu"> 
    <h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2> 
    <h2><?php echo anchor('/products/thassos_wonder_advantages', 'Thassos Wonder+ Advantages');?></h2> 
    <h2><?php echo anchor('products/thassos_wonder_associated_products', 'Associated Products');?></h2> 
    <h2><?php echo anchor('/products/thassos_wonder_brochure', 'Download TW+ Brochure');?></h2> 
</ul> 
</li> 


<li class="pm"><h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2> 
<ul class="product_menu" id="mwmenu"> 
    <h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2> 
    <h2><?php echo anchor('/products/marble_wonder_advantages', 'Marble Wonder+ Advantages');?></h2> 
    <h2><?php echo anchor('products/marble_wonder_associated_products', 'Associated Products');?></h2> 
    <h2><?php echo anchor('/products/marble_wonder_brochure', 'Download MW+ Brochure');?></h2> 
</ul> 
</li> 

<li class="pm"><h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2> 
<ul class="product_menu" id="pbmenu"> 
    <h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2> 
    <h2><?php echo anchor('/products/polybond_advantages', 'PolyBond+ Advantages');?></h2> 
    <h2><?php echo anchor('products/polybond_areas_of_applications', 'Areas of Applications');?></h2> 
    <h2><?php echo anchor('/products/polybond_brochure', 'Download Polybond+ Brochure');?></h2> 
</ul> 
</li> 

這裏是本地菜單jQuery代碼：

$(function() { 
var pathname = location.pathname; 
var highlight; 
//highlight home 
if(pathname == "/"){ 
    highlight = $('ul#accordion > li:first > a:first'); 
    $('a.active').parents('li').addClass('active'); 
} 
else { 
    var path = pathname.substring(1); 
    if (path) 
     highlight = $('ul#accordion a[href$="' + path + '"]'); 
} 
highlight.attr('class', 'active'); 

// hide 2nd, 3rd, ... level menus 
$('ul#accordion ul').hide(); 

// show child menu on click 
$('ul#accordion > li > a.product_menu').click(function() { 
    //minor improvement 
    $(this).siblings('ul').toggle("slow"); 
    return false; 
}); 

//open to current group (highlighted link) by show all parent ul's 
$('a.active').parents('ul').show(); 

//if you only have a 2 level deep navigation you could 
//use this instead 
//$('a.selected').parents("ul").eq(0).show(); 

}）;

不斷學習jquery這樣的幫助類型將不勝感激。 謝謝 - G

Answer 1

您可以通過幾種不同的方式來做到這一點，一種方法是始終標識您的身體標記和錨點標記，並使用CSS選擇器來完成這項工作。

我喜歡用控制器的名稱來識別我的身體標記，它非常方便。

在這種情況下，你的身體標記將有ID爲「產品」，對你的錨標識結合這一點，你可以使用CSS這樣

#products #productLink { 
    color: #ff8833; 
} 

另一種方式來做到這將是一個幫手函數在CI中檢查鏈接是否與當前URI相關，並向錨點添加一個「活動」類，如下所示。

function menu_anchor($uri = '', $title = '', $attributes = array()) 
{ 
    if ($uri == uri_string()) 
    { 
     $attributes['class'] = (isset($attributes['class'])) ? ' active' : 'active'; 
    } 

    return anchor($uri, $title, $attributes); 
} 

Answer 2

我已經創建了一個幫助函數，可以幫助從codeigniter框架中的URL自動創建麪包屑。

詳情請查看以下職位 -

http://www.thephpx.com/2010/05/12/codeigniter-helper-create-breadcrumb-from-url/

感謝，

費薩爾·艾哈邁德· http://www.thephpx.com/