как правильно использовать метод GET на динамическом веб-сайте с использованием PHP?

#php #html #css

#php #HTML #css

Вопрос:

Извините за очень расплывчатое название, я не уверен, как описать мою проблему… Я исправляю свой веб-сайт, чтобы сделать его динамичным с помощью PHP, и пытаюсь изменить боковую панель навигации. Поэтому, когда я нажимаю вариант 2, он меняет цвет фона варианта 2 и так далее. Однако я не уверен, где реализовать foreach параметры стиля по-другому.

 .flexContainer {
  display: flex;
}

.flexContainer>div {
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

.sidebarContainer {
  flex-shrink: 1;
}

.sidebar {
  width: 200px;
  background-color: #dd1d5e;
  overflow: auto;
  border-radius: 30px;
}

.sidebar a {
  display: block;
  color: white;
  padding: 16px;
  text-decoration: none;
}

.sidebar a:hover:not(.active) {
  background-color: #ffffff;
  color: #dd1d5e;
}

.sidebar a.selected {
  background-color: #ffffff;
  color: #dd1d5e;
}

 <section>
  <?php
  if (isset($_GET['categoryId'])) {
      $selectedPage = $_GET['categoryId'];
  } else {
      $selectedPage = '1';
  }
  if ($selectedPage == '1') {
          echo "<div class="flexContainer">
                  <div class="sidebarContainer">
                      <div class="sidebar">
                          <a href="category.php" class="selected">Holiday</a>
                          <a href="category.php">Vegetarian</a>
                          <a href="category.php">Dessert</a>
                          <a href="category.php">Cultural Cuisine</a>
                      </div>
                  </div>";}
  elseif ($selectedPage == '2') {
          echo "<div class="flexContainer">
                  <div class="sidebarContainer">
                      <div class="sidebar">
                          <a href="category.php">Holiday</a>
                          <a href="category.php" class="selected">Vegetarian</a>
                          <a href="category.php">Dessert</a>
                          <a href="category.php">Cultural Cuisine</a>
                      </div>
                  </div>";}
  elseif ($selectedPage == '3') {
          echo "<div class="flexContainer">
                  <div class="sidebarContainer">
                      <div class="sidebar">
                          <a href="category.php">Holiday</a>
                          <a href="category.php">Vegetarian</a>
                          <a href="category.php" class="selected">Dessert</a>
                          <a href="category.php">Cultural Cuisine</a>
                      </div>
                  </div>";}
  elseif ($selectedPage == '4') {
          echo "<div class="flexContainer">
                  <div class="sidebarContainer">
                      <div class="sidebar">
                          <a href="category.php">Holiday</a>
                          <a href="category.php">Vegetarian</a>
                          <a href="category.php">Dessert</a>
                          <a href="category.php" class="selected">Cultural Cuisine</a>
                      </div>
                  </div>";
  }
  ?>

    <!--        <div class="flexContainer">-->
    <!--            <div class="sidebarContainer">-->
    <!--                <div class="sidebar">-->
    <!--                    <a href="category.php" class="selected">Holiday</a>-->
    <!--                    <a href="category.php">Vegetarian</a>-->
    <!--                    <a href="category.php">Dessert</a>-->
    <!--                    <a href="category.php">Cultural Cuisine</a>-->
    <!--                </div>-->
    <!--            </div>-->

Боковая панель навигации выглядит следующим образом, и, например, когда я нажимаю Dessert , я хочу, чтобы эта опция была оформлена по-другому с использованием PHP. Как я могу этого добиться? Я попытался добавить

 <a href="category.php?categoryId=$categoryId" class="selected">Holiday</a>
<a href="category.php?categoryId=$categoryId">Vegetarian</a>
<a href="category.php?categoryId=$categoryId">Dessert</a>
<a href="category.php?categoryId=$categoryId">Cultural Cuisine</a>

вот, но это не сработало. Он показывает, что выбрано несколько баров… Любой совет будет оценен по достоинству!

Ответ №1:

Вы можете использовать свой get parmeter и создавать отдельные файлы стилей css для вашей навигации и включать их динамически. Например:

 <?php
$categryId = isset($_GET['categoryId']) ? $_GET['categoryId'] : 1;
?>

...
<link rel="stylesheet" href="css/category_<?=$categoryId;?>.css">

Или, если у вас другая структура навигации, вы можете сделать то же самое, включив php-файл со структурой html.

1. Привет, спасибо за комментарий. Я хочу знать, как перейти на разные страницы из текущего варианта. Так, например, моя боковая панель в настоящее время находится в режиме «Праздник», и если я нажму «Десерт», она должна перейти к «Десерт» (который меняет цвет фона, потому что теперь выбран «десерт»). Но я не могу этого сделать….