Предварительно выберите параметр раскрывающегося меню в Bootstrap в соответствии с просматриваемой страницей

У меня есть веб-сайт на PHP, где index.php вызывает разные веб-страницы следующим образом:

index.php?page=автомобили

а потом:

<html code>
<?php
$pagesOk = array('cars, 'boats', 'trucks);
...
if (in_array($_GET['page'], $pagesOk)) {
   require_once('pages/'.$page.'.php');
}

У меня также есть окно поиска (заполненное автозаполнением JQuery), присутствующее в верхней части файла index.php, так что оно доступно со всех подстраниц.

<nav class = "searchbar input-group">
   <input type = "hidden" name = "search_param" value = "all" id = "search_param">
   <input class = "reset" type = "search" id = "searchInput" autocomplete = "none" data-clearButton >
   <button class = "reset cd-nav-trigger" aria-label = "Toggle menu"></button>
   <div class = "input-group-btn search-panel">
     <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
       <span id = "search_concept">All content<span class = "caret"></span>
     </button>
     <ul class = "dropdown-menu mode-recherche" role = "menu" style = "top: 10px !important; left: -10px !important">
          <li><a href = "#cars">Cars</a></li>
          <li><a href = "#boats">Boats</a></li>
          <li><a href = "#trucks">Trucks</a></li>
          <li class = "dropdown-divider"></li>
          <li><a href = "#all">All content</a></li>
     </ul>
  </div>

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

Это означает, что если пользователь находится на странице index.php?page=boats, в поле поиска будет выбрано раскрывающееся меню «Лодки», чтобы по умолчанию он мог искать только лодки.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете передать имя своей страницы, а затем selected вариант на основе $page имени

здесь полный код, включая php:

<?php
    $pagesOk = array('cars','boats', 'trucks');
    $page = $_GET['page'];
    if (in_array($page, $pagesOk)) {
        # do somthing
        # require_once('pages/'.$page.'.php');
    }
?>

<!DOCTYPE html>
<html lang = "en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
  <nav class = "navbar navbar-expand-sm bg-light navbar-light">
    <div class = "container">
      <a class = "navbar-brand" href = "javascript:void(0)">LOGO</a>
      <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#mynavbar">
        <span class = "navbar-toggler-icon"></span>
      </button>
      <div class = "collapse navbar-collapse" id = "mynavbar">
        <ul class = "navbar-nav me-auto">
          <li class = "nav-item">
            <a class = "nav-link" href = "javascript:void(0)">Home</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "javascript:void(0)">Pages</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "javascript:void(0)">Contacts</a>
          </li>
        </ul>
        <form class = "d-flex">
          <select class = "form-select">
            <option>All content</option>
            <option <?=$page == 'cars' ? "selected" : ""; ?>>Cars</option>
            <option <?=$page == 'boats' ? "selected" : ""; ?>>Boats</option>
            <option <?=$page == 'trucks' ? "selected" : ""; ?>>Trucks</option>
          </select>
        </form>
      </div>
    </div>
  </nav>
  <div class = "container mt-3">
    <h3>Some body text</h3>
    <p>You can also include forms inside the navigation bar.</p>
  </div>
</body>
</html>

Сделать это с помощью <select> — простое решение, но не по теме. Мне нужно сохранить эти <ul><li> и сделать это с помощью jquery

Jibeji 18.11.2022 00:04

пожалуйста, поделитесь полным кодом здесь или codepen.io

Mazen Alhrazi 18.11.2022 00:08

Другие вопросы по теме