Это мой первый пост, так простите меня, что я просто новый в мире веб-разработки.
Обычно, когда я пытаюсь создать веб-сайт, я создаю файл с именем header.html и footer.html, чтобы я только один раз менял данные на всех страницах, вместо того, чтобы иметь несколько одинаковых заголовков во многих html-файлах. И включите их все в файл php вместе с содержимым и php-кодами, которые поступают на страницу.
Теперь моя проблема в том, что у меня есть только 1 заголовок, css спроектирован таким образом, что независимо от текущего меню / вкладки он будет помечен как «выбранный», чтобы он был очевидным для пользователя, на какой странице они сейчас находятся.
Мой вопрос: как решить эту проблему:
1.) Чтобы class="selected" зависимости от текущей страницы / URL-адреса.
<!--Menu Starts--> <div class="menu"> <div id="smoothmenu" class="ddsmoothmenu"> <ul> <li><a href="index.php" class="selected">Home</a></li> <li><a href="about.php">About</a> </li> <li><a href="services.php">Services</a> </li> <li><a href="features.php">Features</a></li> <li><a href="#">Support</a> <ul> <li><a href="support1.php">Support 1</a></li> <li><a href="support2.php">Support 2</a></li> </ul> </li> </ul> </div> </div> <!-- Menu Ends--!>
Спасибо 🙂
Если вы ищете не-javascript / php-подход …
Сначала вам нужно определить, какая навигационная ссылка должна быть установлена как активная, а затем добавить выбранный класс. Код будет выглядеть примерно так:
HTML внутри php-файла
Вызов функции php inline в гиперссылке <a> разметки, проходящей по ссылке назначения запроса uri
<ul> <li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li> <li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li> <li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li> <li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li> <li><a href="#">Support</a> <ul> <li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li> <li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li> </ul> </li> </ul>
Функция PHP
Функция php просто должна сравнивать переданный в uri запроса, и если он соответствует текущей отображаемой странице, выведите выбранный класс
<?php function echoSelectedClassIfRequestMatches($requestUri) { $current_file_name = basename($_SERVER['REQUEST_URI'], ".php"); if ($current_file_name == $requestUri) echo 'class="selected"'; } ?>
Вы можете указать каждую ссылку и использовать JavaScript / Jquery, чтобы добавить selected класс к соответствующей ссылке.
<!--Menu Starts--> <div class="menu"> <div id="smoothmenu" class="ddsmoothmenu"> <ul> <li id="home-page"><a href="index.php" class="selected">Home</a></li> <li id="about-page"><a href="about.php">About</a> </li> <li id="services-page"><a href="services.php">Services</a> </li> <li id="features-page"><a href="features.php">Features</a></li> <li id="support-page"><a href="#">Support</a> <ul> <li id="support1-page"><a href="support1.php">Support 1</a></li> <li id="support2-page"><a href="support2.php">Support 2</a></li> </ul> </li> </ul> </div> </div> <!-- Menu Ends--!>
На своей странице содержимого используйте jQuery, чтобы сделать что-то вроде:
$(document).ready(function(){ $("#features-page").addClass("selected"); });
Другим способом, который вы можете использовать, является:
Добавить элемент класса на основе имени страницы
Дайте каждой ссылке отдельный идентификатор, затем используйте jQuery на отдельных страницах.
<li><a href="index.php" id="home">Home</a></li> <li><a href="about.php" id="about">About</a> </li> <li><a href="services.php" id="services">Services</a> </li> <li><a href="features.php" id="features">Features</a></li> <li><a href="#" id="support">Support</a> <ul> <li><a href="support1.php">Support 1</a></li> <li><a href="support2.php">Support 2</a></li> </ul> </li>
На странице услуг:
$(document).ready(function(){ $("#services").addClass("selected"); });
Или даже лучше, как указал Робберк в комментариях, нет необходимости даже беспокоиться о том, что id просто заставляет jquery:
$(document).ready(function(){ $("[href='services.php']").addClass("selected"); });
Одним из вариантов подхода Криса является вывод определенного класса для идентификации страницы, например, в элементе body , а затем использование фиксированных классов в элементах меню и правило CSS, которое нацелено на их соответствие. Например, эта страница:
<DOCTYPE HTML> <head> <title>I'm the about page</title> <style type="text/css"> .about .about, .index .index, .services .services, .features .features { font-weight: bold; } </style> </head> <body class="<?php echo basename(__FILE__, ".php"); ?>"> This is a menu: <ul> <li><a href="index.php" class="index">Home</a></li> <li><a href="about.php" class="about">About</a> </li> <li><a href="services.php" class="services">Services</a> </li> <li><a href="features.php" class="features">Features</a></li> </ul> </body>
… довольно легкий динамический код, но должен достичь цели; если вы сохраните его как «about.php», тогда ссылка «О программе» будет выделена жирным шрифтом, но если вы сохраните его как «services.php», ссылка «Услуги» будет выделена жирным шрифтом и т. д.
Если ваша структура кода подходит ему, вы можете просто жестко закодировать класс body страницы в файле шаблона страницы, вместо того, чтобы использовать для этого какой-либо динамический код. Этот подход эффективно дает вам способ перемещения «логики» системы меню из кода меню, который всегда будет оставаться неизменным для каждой страницы и до более высокого уровня.
В качестве дополнительного бонуса теперь вы можете использовать чистый CSS для таргетинга других вещей на основе страницы, на которой вы находитесь. Например, вы можете включить все элементы h1 на странице index.php red, используя только CSS:
.index h1 { color: red; }
Вы можете сделать это из простой функции if и PHP page / basename ().
<!--Menu Starts--> <div class="menu"> <div id="smoothmenu" class="ddsmoothmenu"> <ul> <li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li> <li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li> <li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li> <li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li> </ul> </div> </div>
Извините за мой плохой английский, но может быть, это может помочь. Вы можете использовать jQuery для этой задачи. Для этого вам нужно сопоставить URL-адрес страницы с привязкой к меню, а затем добавить к нему выбранный класс. например, код jQuery будет
jQuery('[href='+currentURL+']').addClass('selected');