Добавить элемент класса на основе имени страницы - PullRequest
2 голосов
/ 30 октября 2011

У меня есть небольшой веб-сайт с 5 разделами навигации.

Во избежание изменения кода на каждой странице, когда мне нужно добавить еще один раздел, я использую php include в разделе навигации каждой страницы.

Теперь мне нужно добавить класс «selected» в элемент списка (li) в зависимости от посещенной страницы.¿Как это сделать?Потому что теперь навигация уникальна.

Это код

            <nav>
                <ul>
                    <li class="selected"><a href="index.php">Home</a></li>
                    <li><a href="biography.php">Bio</a></li>
                    <li><a href="photo.php">Photo</a></li>
                    <li><a href="work.php">Work</a></li>
                    <li class="last"><a href="contact.php">Contact</a></li>
                </ul>
                <div class="clear"></div>
            </nav>

Спасибо!

Ответы [ 6 ]

2 голосов
/ 30 октября 2011

Вот простой способ сделать это, чистый CSS, не требующий никакого программирования: добавьте ID к своему телу и своим ссылкам:

<body id='home'>
    <nav>
        <ul>
            <li id='home-link'><a href="index.php">Home</a></li>
            <li id='bio-link'><a href="biography.php">Bio</a></li>
            <li id='photo-link'><a href="photo.php">Photo</a></li>
            <li id='work-link'><a href="work.php">Work</a></li>
            <li id='contact-link'class="last"><a href="contact.php">Contact</a></li>
        </ul>
        <div class="clear"></div>
    </nav>

Теперь вы просто делаете стиль следующим образом:

#home #home-link, #bio #bio-link, #photo #photo-link, #work #work-link, #contact #contact-link{
    //however you would have styled .active
}
1 голос
/ 30 октября 2011

В вашей структуре URL вы можете использовать $_SERVER['PHP_SELF'] для идентификации текущей страницы.

$nav = array(
'Home'  => 'index.php',
'Bio'   => 'biography.php',
'Photo' => 'photo.php',
'Work'  => 'work.php',
'Contact' => 'contact.php'
);

foreach($nav as $nav_title => $nav_link)
{
    echo '<li '.($nav_link == basename($_SERVER['PHP_SELF']) ? 'class="selected"':'').'><a href="'.$nav_link.'">'.$nav_title.'</a></li>';
}
0 голосов
/ 18 марта 2013

Я все еще относительно новичок в php, поэтому не могу сказать, соответствует ли это рекомендациям или хаку, но это работает.

Я знаю, что это старая тема, но у меня есть решение, которое решает проблему, поднятую Фредериком в Посте Криса Соболевского.

Мы предполагаем, что у вас есть заголовок (который содержит ссылки) и шаблон нижнего колонтитула, и вы не хотите создавать новые заголовки для каждой страницы.

Поскольку каждая ссылка выводит нас на новую страницу с уникальным именем страницы, мы можем использовать это для присвоения идентификатора каждой из ссылок. В качестве альтернативы мы могли бы использовать параметр из $ _GET в зависимости от того, как настроена ваша навигация.

В вашем примере мы могли бы использовать что-то вроде:

<nav>
    <ul>
        <li class="selected"><a href="index.php" id="indexLink">Home</a></li>
        <li ><a href="biography.php" id="biographyLink">Biography</a></li>
        <li ><a href="photo.php" id="photoLink">Photo</a></li>
        <li ><a href="work.php" id="workLink">Work</a></li>
        <li ><a href="contact.php" id="contactLink">Contact</a></li>

    </ul>
    <div class="clear"></div>
</nav>

Теперь в нашем php-файле мы можем манипулировать DOM, используя любую технику, которую мы предпочитаем добавлять и удалять активный класс из текущей активной ссылки.

Помните, что я новичок, так что простите меня, если это не лучший способ манипулирования DOM, но вот как я подошел к нему:

?php
  function curPageName() {
    $pageName = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
    return trim($pageName, ".php");
  }

  //string to find the active class
  $classString=' class="activeLink"';

  //String to find the current page link
  $pageString='id="'.curPageName().'Link"';

  //String to set the current page link active
  $activeString='id="'.curPageName().'Link" class="activeLink"';

  //load the html from the header file
  $fileContents=file_get_contents("header.html");

  //Remove the old active class
  $newHtmlContent=str_replace($classString, "", $fileContents);

  //Set the new active class
  $newHtmlContent=str_replace($pageString, $activeString, $newHtmlContent);

  //Save the manipulated HTML
  file_put_contents("header.html",$newHtmlContent);
?>

Тогда просто добавьте activeLink в ваш CSS, как вам захочется.

У меня возник соблазн просто найти URL, чтобы изменить DOM заголовочного файла, однако, если есть какие-либо другие ссылки на ту же страницу где-то еще в документе, мы не хотим, чтобы они также стилизовались. Поэтому я решил, что лучше всего добавить идентификатор. Это также лучше, если мы используем некоторые другие методы манипулирования DOM в php.

Любые отзывы о том, является ли решение хорошим или плохим, приветствуются!

0 голосов
/ 14 июля 2012

С помощью JQuery вы можете динамически добавить «текущий» класс к родительскому элементу $ ('nav> ul> li> a'), который по абсолютному значению ведет к странице, которую вы просматриваете в настоящее время.

$(document).ready(function(){
    $('nav > ul > li > a').each(function(){
        if (window.location.indexOf($(this).prop('href'))!=-1) {
            $(this).parent().addClass("current");
        }
    });
});

Таким образом, всякий раз, когда меню загружается на страницу, «текущий» класс добавляется в нужное место в навигационной панели.

0 голосов
/ 30 октября 2011

Вот решение, добавьте свои новые страницы в массив страниц:

<?php
$current_page = basename($_SERVER['REQUEST_URI']);
$pages = array('index','biography','photo','work','contact');
if(!in_array($current_page,$pages)){$current_page='index';}

$menu = "\n<nav>\n\t<ul>\n";
foreach($pages as $link){
    $menu.="\t\t<li ".(($link==$current_page)?'class="selected"':'')."><a href=\"".$link.".php\">".(($link=='index')?'Home':ucfirst($link))."</a></li>\n";
}
$menu .= "\t</ul>\n\t<div class=\"clear\"></div>\n</nav>";

echo $menu;
?>

Выходы:

<nav>
    <ul>
        <li class="selected"><a href="index.php">Home</a></li>
        <li ><a href="biography.php">Biography</a></li>
        <li ><a href="photo.php">Photo</a></li>
        <li ><a href="work.php">Work</a></li>
        <li ><a href="contact.php">Contact</a></li>

    </ul>
    <div class="clear"></div>
</nav>
0 голосов
/ 30 октября 2011
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...