Есть ли более чистый способ сделать боковую панель активной для каждой страницы?
У меня есть этот код боковой панели
<li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a>
<ul>
<li><a href="/restaurant_pos">Restaurant POS Systems</a></li>
<li><a href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li>
<li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li>
<li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li>
<li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li>
<li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li>
<li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li>
....
....
И я хочу добавить активный класс на текущую страницу, поэтому я выбрал такой подход
<li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a>
<ul>
<li><a <?php if($_SERVER['REQUEST_URI'] == '/restaurant_pos/'){
echo "class='active' ";
}
?> href="/restaurant_pos">Restaurant POS Systems</a></li>
<li><a
<?php if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){
echo "class='active' ";
}
?>
href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li>
<li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li>
<li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li>
<li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li>
<li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li>
<li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li>
....
....
Но я чувствую, что должен быть лучший и более чистый способ сделать это...любые идеи
4 answers
Это может быть проще сделать в JavaScript/jQuery. Сохранение взаимодействия на стороне клиента также сэкономит на запросах сервера (хотя это может быть более серьезной проблемой на сайтах с более высокой нагрузкой).
Что-то вроде этого - возможно, вам придется изменить положение массива url на основе URL-адреса вашего сайта:
Jsfiddle: http://jsfiddle.net/g_thom/AXm6e/2/
var pathname = window.location.href;
var partsArray = pathname.split('/');
var url = '/' + partsArray[3];
var a_s = $('li a');
a_s.removeClass('active');
a_s.each(function () {
if ($(this).attr('href') == url) {
$(this).addClass('active');
}
});
Конечно,
Поместите все ссылки и их тексты в массив.
Затем выполните итерацию по массиву, чтобы выполнить вывод.
Если результат будет таким, каким вы его знаете, без активной функциональности, вы можете перейти к следующему шагу.
Введите проверку соответствия текущего запроса ссылке, и если это произойдет, добавьте класс в вывод.
Вы решили свою проблему с помощью итерации. Применяется тот же метод к тем же данным, помещая данные в повторяющуюся (циклическую) структуру. Не повторяйте код, повторяйте данные. Надеюсь, это поможет.
Цикл по массиву данных в цикле foreach
<?php
$links = array(
array('/restaurant_pos','Restaurant POS Systems'),
array('/bar_nightclub_pos/','Bar and Nightclub POS Systems')
);
foreach($links as $k => $v){
if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){ $class = ' class="active"'; } else { $class = ''; }
echo '<li><a href="'.$v[0].'"'.$class.'>'.$v[1].'</a></li>';
};
?>
Выходные данные:
Я бы сделал что-то вроде этого:
<?php
$restaurants = array(
array('label' => 'Restaurant POS Systems', 'url' => '/restaurant_pos'),
array('label' => 'Bar and Nightclub POS Systems', 'url' => '/bar_nightclub_pos'),
...
);
/*set active restaurant*/
foreach ($restaurants as &$r) {
$r['active'] = ($_SERVER['REQUEST_URI'] == $r['url'])? 'active': '';
}
unset($r);
?>
<ul>
<?php foreach ($restaurants as $r) { ?>
<li><a href="<?php echo $r['url']; ?>" class="<?php echo $r['active']; ?>"><?php echo $r['label']; ?></a></li>
<?php } ?>
</ul>
Как правило, рекомендуется иметь как можно меньше логики программирования в той части кода, которая генерирует HTML.