2010-03-16 4 views
1

У меня есть глобальное меню и локальное меню для 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, поэтому помощь будет оценена по достоинству. Thanks - G

ответ

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); 
} 
+0

бы я должен сделать это вручную для каждой ссылки тогда? – strangeloops

+0

Используйте функцию menu_anchor в вашем представлении вместо функции привязки. – Dyllon

+0

эй Dyllon, не могли бы вы указать мне более подробные инструкции о том, как реализовать любой из вышеперечисленных. Бит неудачен. – strangeloops

0

Я создал вспомогательную функцию, которая помогает создавать панировочные сухари автоматически из URL-адреса в системе codeigniter.

для деталей, пожалуйста, проверьте следующее сообщение -

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

спасибо,

Фейсал Ahmed http://www.thephpx.com/

Смежные вопросы