Как я могу выбрать класс CSS в зависимости от того, на какой странице я нахожусь в PHP? - PullRequest
0 голосов
/ 21 августа 2009

Мне нужно вставить класс с именем current в список, как показано ниже, в зависимости от того, на какой странице я нахожусь.
Все страницы на моем сайте включены в индексную страницу следующим образом:
Index.php включает файл заголовка, затем файл body, а затем файл нижнего колонтитула.
Файл тела будет одной из страниц ниже.
Это включено через страницу как это в URL index.php? P = home
Так что я могу легко получить переменную страницы $ p и узнать, когда я нахожусь на определенной странице

Так, каков ЛУЧШИЙ способ добавить «текущий» класс CSS в список навигации, как показано ниже?

<li class="drop"><a href=""><em>Home</em></a></li>
<li class="drop"><a href=""><em>inbox</em></a></li>
<li class="drop"><a href=""><em>outbox</em></a></li>
<li class="drop"><a href=""><em>online users</em></a></li>
<li class="drop"><a href=""><em>all users</em></a></li>
<li class="drop"><a href=""><em>forums</em></a></li>
<li class="drop"><a href=""><em>blogs</em></a></li>
<li class="drop"><a href=""><em>bulletins</em></a></li>
<li class="drop"><a href=""><em>news</em></a></li>

... это просто список макетов, реальный список более сложный


ОБНОВЛЕНИЕ: я не знаю, подходит ли массив или нет, Выше приведен быстрый пример, ниже приведен мой АКТУАЛЬНЫЙ список меню, в элементы списка верхнего уровня встроены подменю, поэтому, если я нахожусь на любой странице в подменю, в главном меню должен быть добавлен «текущий» класс, делать массив несколько сложно?

    <div id="bottomrow"> 
      <div class="pad"> 
        <ul class="menu left">
          <li class="first"><a href="/"><em>Home</em></a></li>
          <li class="current users drop"><a href=""><em>Users</em></a><span class="drop">&nbsp;</span> 
            <ul id="moreheader">
              <li><a href=""><em>Widgets</em></a></li>
              <li><a href=""><em>News</em></a></li>
              <li><a href=""><em>Promote</em></a></li>
              <li><a href=""><em>Development</em></a></li>
              <li><a href=""><em>Bookmarks</em></a></li>
              <li><a href=""><em>About</em></a></li>
            </ul>
          </li>
          <li><a href=""><em>Forums</em></a></li>
          <li class="drop current"><a href="/moreheader"><em>More</em></a><span class="drop">&nbsp;</span> 
            <ul id="moreheader">
              <li><a href=""><em>Widgets</em></a></li>
              <li><a href=""><em>News</em></a></li>
              <li><a href=""><em>Promote</em></a></li>
              <li><a href=""><em>Development</em></a></li>
              <li><a href=""><em>Bookmarks</em></a></li>
              <li><a href=""><em>About</em></a></li>
            </ul>
          </li>
          <li class="moneytabmenu"><a href="/moneytabmenu"><em>Money:<span class="moneytabmenu-total">$0.00</span></em></a></li>
        </ul>
        <ul class="menu right">
          <li class="drop myaccount"><a href="" class="first"><img class="avatar" src="http://gravatar.com/avatar.php?gravatar_id=7ab1baf18a91ab4055923c5fd01d68a2&amp;rating=pg&amp;size=80&amp;default=" height="19" width="19" alt="you" /><em>My 
            Account</em></a><span class="drop">&nbsp;</span> 
            <ul id="myaccount">
              <li><a href=""><em>Dashboard</em></a></li>
              <li><a href=""><em>Account Settings</em></a></li>
              <li><a href=""><em>Settings</em></a></li>
            </ul>
          </li>
          <li class="drop"><a href=""><em>Mail</em></a><span class="drop">&nbsp;</span> 
            <ul id="mailboxheader">
              <li><a href=""><em>InBox</em></a></li>
              <li><a href=""><em>SentBox</em></a></li>
              <li><a href=""><em>Trash</em></a></li>
              <li><a href=""><em>Post Bulletin</em></a></li>
              <li><a href=""><em>View Bulletins</em></a></li>
            </ul>
          </li>
          <li class="drop"><a href=""><em>More</em></a><span class="drop">&nbsp;</span> 
            <ul id="moreheader">
              <li><a href=""><em>Widgets</em></a></li>
              <li><a href=""><em>News</em></a></li>
              <li><a href=""><em>Promote</em></a></li>
              <li><a href=""><em>Development</em></a></li>
              <li><a href=""><em>Bookmarks</em></a></li>
              <li><a href=""><em>About</em></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- END div#bottomrow -->
  </div> 

Ответы [ 6 ]

3 голосов
/ 21 августа 2009

Не очень хорошее решение, но если у вас был идентификатор, соответствующий вашей переменной $p в каждом из ваших пунктов меню, например:

<li id="home"><a href=""><em>Home</em></a></li>
<li id="inbox"><a href=""><em>inbox</em></a></li>

тогда вы можете либо вывести соответствующий тег <style> с вашим PHP-скриптом (здесь показано $p = 'home'):

<style type="text/css">#home { /* Your "current" styling here */ }</style>

или установите идентификатор тега body:

<body id="page_home">

и поместите это в свою основную таблицу стилей:

#page_home #home,
#page_inbox #inbox,
...
{
    /* Your "current" styling here */
}
1 голос
/ 22 августа 2009

если вы используете одно и то же имя в скрипте и опции меню, попробуйте это, просто рекурсивно:

    $menu = array(
'home',
'users',
array('widgets','news','promote','development','bookmarks'),
'wrapper',
'forums',
array('widgets','news','promote','development','bookmarks'),
'contact'
);

function li_menu($arrItens){
    preg_match("/[^\/]\/(.*?)\./",$_SERVER['PHP_SELF'],$current);
    echo "<ul>";
    foreach($arrItens as $title){
        if ( is_array($title) ) {li_menu($title);} else {
            $cur = ( $title == $current[1] ) ? 'current' : 'drop';
            echo '<li class="'. $cur . '"><a href="'. $title. '.php"><em>'. $title .'</em></a></li>';
        }
    }
    echo "</ul>";
}
li_menu($menu);
1 голос
/ 21 августа 2009

прежде всего я бы поместил их в массив:

$pages = array();
$pages['home'] = array(
    'name' => 'Home',
    'url' => '......',
    'submenus' => array(
       'test-submenu' = array(
          'name' => 'Test Submenu',
          'url' => '.....',
       )
    )
);
$pages['inbox'] = array(
    'name' => 'Inbox',
    'url' => '......',
);

тогда в моем HTML я бы сделал:

<?php foreach ($pages as $section => $page) { ?>
    <li class="drop <?php echo ($_GET['section'] == $section) ? 'current' : ''; ?>">
        <a href="<?php echo $page['url'] ?>"><em><?php echo $page['name'] ?></em></a>
    </li>  
<?php } ?>
0 голосов
/ 21 августа 2009

Недавно я сделал нечто подобное, используя JavaScript, где я хотел изменить идентификатор элемента, который соответствует имени страницы, на 'cur', чтобы он привлек соответствующий стиль.

Я использовал php $_SERVER["PHP_SELF"], чтобы получить имя страницы, JavaScript, чтобы убрать ее из первого слеша, а затем разделить ее, используя «.» в качестве разделителя, давая мне имя текущей страницы. Затем, поскольку я сбрасывал идентификатор, мне пришлось продублировать текущий узел и поменять старый на новый (вы не можете динамически менять идентификатор).

Для класса это намного проще, но это зависит от того, как вы намереваетесь узнать, для каких из них установить className. Является ли JavaScript вариант? Если это так, ты смеешься. Делая это исключительно в PHP, нужно учитывать слишком много факторов, не зная, как вы заполняете свои списки.

0 голосов
/ 21 августа 2009

Грубый пример того, как вы можете это сделать

$menu = array(
    'Home'         => '#'
  , 'inbox'        => '#'
  , 'outbox'       => '#'
  , 'online users' => '#'
  , 'all users'    => '#'
  , 'forums'       => '#'
  , 'blogs'        => '#'
  , 'bulletins'    => '#'
  , 'news'         => '#'
);

$current = "outbox";

foreach ( $menu as $label => $url )
{
  $css = ( $label == $current ) ? 'drop current' : 'drop';
  echo '<li class="', $css, '"><a href="', $url, '"><em>', $label, '</em></a></li>';
}
0 голосов
/ 21 августа 2009

Я предлагаю вместо того, чтобы поддерживать файл списка <li> таких элементов, вы должны поместить элементы в массив и генерировать их динамически.

$arr = array(
    'Home' => 'url/to/home',
    'inbox' => 'url/to/inbox',
    //etc
);

foreach($arr as $name => $url)
{
    echo '<li class="drop';
    if ($name == $p) echo ' curPage';
    echo '"><a href="'.$url.'"><em>'.$name.'</em></a></li>';
}

При создании цикла вы можете использовать любые критерии сравнения, которые вам нужны, чтобы сравнить с $p и определить, что это текущая страница.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...