Как установить класс для HTML-тега при загрузке страницы?

Question

Проблема: Я хочу использовать PHP include для импорта файла "header_menu.html" во все страницы, которые имеют одинаковые навигационные меню, но у каждой страницы есть свой текущий выделенный пункт меню.

Например, ниже приведены меню, в index.php только первый должен быть установлен в «текущий» класс, а в download.php только второй должен быть текущим. Как это сделать с помощью JavaScript? Можете ли вы предоставить подробный рабочий образец? Вы знаете, я не хочу дублировать меню на каждой странице ...

<li><a href="../index.php" class="current">Home</a></li>
<li><a href="../download.php">Download</a></li>
<li><a href="../purchase.php">Buy</a></li>

Спасибо!

---

Редактировать: PHP решения также приветствуются!

Answer 1

Лучшее решение с php.Есть функция, которая сообщает, какая страница вызывает ее.Вы помещаете это в include и используете оператор if, чтобы решить, какой пункт меню установить на class="current"

. Вот функция, которую я нашел в Интернете, которая помогла мне сделать это

<?php
$a = basename($_SERVER['REQUEST_URI'], ".php"); /* supposing filetype .php*/
?>

Тогда код в заголовке будет выглядеть как

<li <?php if($a=='index' || $a==''){echo("class='current'");}?>><a href='index.php'>Home</a></li>
<li <?php if($a=='download'){echo("class='current'");}?>><a href='download.php'>Download</a></li>

Answer 2

Есть много способов сделать это, но способ установить класс через JavaScript - это использовать метод setAttribute:

<a id="home" href="./index.php">Home</a>

<script type="text/javascript">

var link = document.getElementById('home');
link.setAttribute('class', 'here');

</script>

Вы также можете использовать getElementsByTagName ('a') и вернутьмассив всех ссылок, затем сравните их атрибут href (используя getAttribute('href')), чтобы определить текущую страницу.Как я уже сказал, есть много способов выполнить эту часть, в том числе просто с помощью PHP.

Answer 3

Просто используйте php ...

Прежде чем включать файл header.php, установите переменную php, например: $index = "1"; или $download = "1";

Then, in your `<a`> tag, use php again like this:
<li><a href="../index.php" <?php if(isset($index)) echo 'class="current"'>Home</a></li>
<li><a href="../download.php" <?php if(isset($download)) echo 'class="current"'>download</a></li>

Answer 4

Как вы в настоящее время определяете, какой из них должен быть «текущим»?Он основан на имени файла?

Если это так, просто используйте PHP:

<?php
    $pages = array('Home' => 'index.php', 
      'Download' => 'download.php', 
      'Buy' => 'purchase.php');

    foreach ($pages as $pagename=>$filename) :
       $class = "";
       if (strpos($filename, $_SERVER["SCRIPT_NAME"]) !== -1)
       {
           $class = ' class="current"';
       }
?>

<li>
  <a href="../<?=$filename?>"<?=$class?>> 
    <?=$pagename?> 
  </a>
</li> 

<?php endforeach; ?>

Answer 5

Что я делаю, так это разбор URL текущей страницы и установка класса current. Поэтому я использую JavaScript для этого. У меня есть метод в javascript, который находит текущую страницу и в меню навигации, я запрашиваю этот метод, чтобы определить, является ли элемент в меню текущим или нет. Это выглядит так

<script language="javascript">
    function isCurrentPage(inputPage)
        {
            /*..code goes here..
            returns "current" if true*/

        }
</script>

<li><a href="../index.php" class="<script>isCurrentPage("index.php");</script>">Home</a></li>
<li><a href="../download.php" class="<script>isCurrentPage("download.php");</script>">Download</a></li>
<li><a href="../purchase.php" class="<script>isCurrentPage("purchase.php");</script>">Buy</a></li>