Я создаю меню динамически на основе категорий, зарегистрированных в базе данных, что мне нужно:
Когда кто-то нажимает на ссылку, этот параметр должен иметь класс css ‘active’, показывающий страницу, на которой находится пользователь, и даже страницы создаются динамически.
Я понятия не имею, как это сделать, потому что я студент php, и я не смог найти эту информацию в Google для «Динамически меню» Большое спасибо.
<nav class="menu">
<ul class="list">
<li class="line"><a id="item" href="index.php">Home</a></li>
<?php
$categories = $db->select("select * from tbl_category");
if($categories){
while ($result = $categories->fetch_assoc()){
echo <<<HTML
<li id="line" ><a class="item" href="categories.php?category=$result[id]">$result[name]</a></li>
HTML;
}
}
?>
</ul>
<nav>
Прежде всего, вы проходите через это while
цикл и добавление идентификатора «линии» для каждого <li>
элемент. Я предлагаю вам создать уникальные идентификаторы для каждого элемента списка. Я не обязуюсь использовать код так, как он есть у вас, например, вот ваш код, отредактированный для этого:
if($categories){
$i = 1;
while ($result = $categories->fetch_assoc()){
$i++;
echo <<<HTML
<li id="line$i" ><a class="item" href="categories.php?category=$result[id]">$result[name]</a></li>
HTML;
}
}
Затем, когда кто-то нажимает на вашу ссылку, просто используйте jQuery примерно так:
$(".item").click(function() {
$(this).parent('li').addClass('active');
});
Попробуйте что-то подобное:
<nav class="menu">
<ul class="list">
<li class="line"><a id="item" href="index.php">Home</a></li>
<?php
$current_page = isset($_GET['category']) ? $_GET['category']: -1;
$categories = $db->select("select * from tbl_category");
if($categories){
while ($result = $categories->fetch_assoc()){
echo '<li id="line">';
if($result['category'] === $current_page) {
// If we're currently in the active page then add the active class to the <a>
echo '<a class="item active" href="categories.php?category='. $result[id] .'">';
} else {
echo '<a class="item" href="categories.php?category='. $result[id] .'">';
}
echo $result['name'];
echo '</a>';
echo '</li>';
}
}
?>
</ul>
<nav>
Спасибо всем за помощь, основываясь на вашем коде, я решил сделать это:
menu.php:
<nav class="menu" id="menu">
<ul id="list" class="list">
<li id="line" class="<?php if($presentPage == '0')echo 'active';?>"><a id="item" class="item" href="index.php">Home</a></li>
<?php
function checked($pp, $id){
if($pp == $id){
$status = 'active';
return $status;
}
}
$query = "select * from tbl_category";
$category = $db->select($query);
if($category){
while ($result = $category->fetch_assoc()){
echo "<li id='line' class='".checked($presentPage, $result['id'])."'><a id='item' class='item' href='categories.php?category=".$result['id']."'>".$result['name']."</a></li>
";//end echo
}//end while
}//end if
?>
</ul>
</nav>
В моем index.php:
<?php $presentPage = 0;?>
<?php require_once 'header.php';?>
<?php require_once 'menu.php';?>
и в моей категории .php:
<?php
if (!isset($_GET['category']) || $_GET['category'] == NULL) {
$presentPage = 0;
}else{
$presentPage = intval($_GET['category']);//just to make sure that the variable is a number
}
?>
<?php require_once 'header.php';?>
<?php require_once 'menu.php';?>
///...my code...
и в моем CSS конечно:
.active{
background: linear-gradient(#821e82, #be5abe);
}
Это отлично работает для меня, спасибо за помощь.