CSS «активный» не работает при преобразовании HTML в PHP.

Я понимаю, что был задан «похожий» вопрос, но другой пользователь использует совершенно другой подход, чем я. Я просто пытаюсь включить HTML-навигацию на свои PHP-страницы для облегчения модификации в будущем. Когда вы наводите курсор на кнопку, она подсвечивается, а «активная» страница всегда подсвечивается. Наведение работает как на html, так и на php страницах.

Когда моя индексная страница закодирована как index.html, работает «активное» состояние. Когда я запускаю его как index.php, это не так.

Заголовок.html

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.php"><span>Home Page </span></a></li>         
          <li><a href="portfolio.php"><span>Services</span></a></li>
          <li><a href="portfolio.php"><span>Portfolio</span></a></li>          
          <li><a href="about.php"><span> About Us </span></a></li>
          <li><a href="contact.php" class="active"><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

CSS:

/*menu*/
.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(../images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(../images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(../images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(../images/l_menu.gif) no-repeat left; }

Как я упоминал выше, если ссылка выше в header.html закодирована как (page.html), работает «активное наведение». Что дает?

РАЗРЕШАЮЩАЯ СПОСОБНОСТЬ

Для тех, кто заинтересован, благодаря помощи Киркби я воссоздал файл Header.html, сохранил его как PHP и использовал функциональность Request_URI. Изменения выглядят так:

  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index" <?php if($_SERVER["REQUEST_URI"] == "/index") { echo 'class="active"';} ?>><span>Home Page </span></a></li>
          <li><a href="about" <?php if($_SERVER["REQUEST_URI"] == "/about") { echo 'class="active"';} ?>><span> About Us </span></a></li>          
          <li><a href="portfolio" <?php if($_SERVER["REQUEST_URI"] == "/portfolio") { echo 'class="active"';} ?>><span>Services</span></a></li>
          <li><a href="enroll" <?php if($_SERVER["REQUEST_URI"] == "/enroll") { echo 'class="active"';} ?>><span>Enroll</span></a></li>
          <li><a href="contact" <?php if($_SERVER["REQUEST_URI"] == "/contact") { echo 'class="active"';} ?>><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>

navigation php css hyperlink hover
person JM4    schedule 16.06.2010    source источник
comment
Вы просматривали в своем браузере исходный код рабочей и нерабочей версии и сравнивали, чем они отличаются?   -  person Craig    schedule 17.06.2010
comment
источник тот же, он работает, когда страницы html и не работают, когда закодированы в PHP. В остальном ТОЧНО то же самое. Я думаю, что это должна быть разница в том, как PHP распознает классы CSS.   -  person JM4    schedule 17.06.2010
comment
PHP не имеет к этому никакого отношения. Браузер должен связать наборы правил CSS (на основе их селекторов) с элементами HTML. Они включают классы HTML в расчет, если селектор CSS включает один или несколько селекторов классов. (Нет такой вещи, как класс CSS).   -  person Quentin    schedule 17.06.2010
comment
Явно что-то есть. Если ТОЧНО такой же код включен в php, он не работает. Если он сохранен как .html, он работает. HOVER даже работает, просто не «активная» страница.   -  person JM4    schedule 17.06.2010
comment
Можете ли вы привести полный пример? С полным файлом php, который не работает, и полным файлом html, который работает?   -  person Craig    schedule 17.06.2010
comment
@Craig - длина страницы составляет почти 1000 строк. Приведенный выше код - это ТОЧНО то, что я использую. приведенный выше html вставляется в html-страницу при сохранении в формате .html или при использовании как ‹?php include ('footer.html'); ?› при включении в одно и то же место на той же странице.   -  person JM4    schedule 17.06.2010
comment
разве это не должно быть a:active (вместо a.active)?   -  person BojanG    schedule 17.06.2010
comment
@BojanG - возможно, но работает так же. Ответ Дона Кирби верен, учитывая включение, «активный» класс всегда будет контактным во включаемом файле, тогда как раньше он был «активен» на отдельных страницах.   -  person JM4    schedule 17.06.2010

Ответы (2)


arrow_upward
1
arrow_downward

Как добавить class="active" к правильной кнопке, когда вы включаете HTML-файл на страницу PHP? Из вашего примера видно, что в файле заголовка HTML, который вы включаете, активна кнопка «Связаться с нами», и так будет для всех страниц.

Вам понадобится либо PHP-код в заголовке, чтобы добавить class="active" к правильной кнопке, либо использовать javascript в браузере, чтобы добавить класс к правильной кнопке для каждой страницы. Когда я пишу заголовок во включаемом файле, я обычно создаю функцию с параметром для выбора текущей вкладки в разделе навигации. Затем я вызываю эту функцию из соответствующего места на главной странице.

person Don Kirkby    schedule 16.06.2010
comment
Кирби - вы совершенно правы. При включении контакт всегда активен независимо от страницы. У вас есть примеры кода для проектов, которые вы сделали для достижения этой цели? - person JM4; 17.06.2010
comment
Это работает только с серверами Apache, верно? Я пытаюсь реализовать это в своем меню, и это не работает. - person iamwhitebox; 10.02.2011
comment
@Jeffrey, в руководстве по PHP говорится, что _SERVER[] записи различаются от сервера к серверу: ca3.php.net/manual/en/reserved.variables.server.php Другими словами, на вашем сервере может не быть записи для 'REQUEST_URI'. Попробуйте использовать функцию phpinfo(), чтобы узнать, какие записи доступны для вас. Запись 'QUERY_STRING' может быть вашим лучшим выбором. Тем не менее, я считаю, что проще всего поместить HTML-заголовок в функцию и просто передать имя вкладки в качестве параметра. Тогда вам не нужно возиться с серверными переменными, и все это явно. - person Don Kirkby; 10.02.2011

arrow_upward
1
arrow_downward

Вот мое решение; Это очень легко:

<ul id="menu">
    <?php 
    $c=$_GET[c];
    ?>
    <li><a href="index.php?c=inicio.html" <?php if($c=="inicio.html"){ echo 'class="active"';}?>>Inicio</a></li>
    <li><a href="index.php?c=corporativo.html" <?php if($c=="corporativo.html"){ echo 'class="active"';}?>>Corporativo</a> </li>
    <li><a href="index.php?c=diseno.html" <?php if($c=="diseno.html"){ echo 'class="active"';}?>>Diseño</a></li>
    <li><a href="index.php?c=impresion.html" <?php if($c=="impresion.html"){ echo 'class="active"';}?>>Impresión</a> </li>
</ul>

Я только прочитал переменную, которую использовал в include.

person Pepe Rojas    schedule 11.10.2011