1 Тема від vladalert67

  • vladalert67
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 8
    • Репутація: 0

Тема: Неправильно працює пошук

Неправильно працює пошук, не можу зрозуміти де я зробив помилку. Суть така: У нас є пошук за номером,за маркой,пошук за назвою товару,так ось між ними має бути однаковий перехід з лінію знизу. А виходить шо надпис працює тільки на одній. Допоможіть зрозуміти де була помилка.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/fonts.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="header">
   <div class="header_top">
  <div class="container">
<div class="header_top-inner">
  <nav class="menu">
    <ul class="menu_list">
      <li class="menu_item">
        <a class="menu_link"href="#">
        Магазины
        </a>
      </li>
      <li class="menu_item">
        <a class="menu_link"href="#">
        Акции
        </a>
      </li>
      <li class="menu_item">
        <a class="menu_link"href="#">
          Доставка и оплата       
        </a>
      </li>
    </ul>
  </nav>
 <a class="logo" href="#">
   <img class="logo_img" src="images/logo.svg" alt="">
 </a>
 <div class="header_box">
<p class="header_adress">
  Днепр,  ул. Науки  25
</p>
<ul class="user-list">
  <li class="user-list_item">
<a  class="user-list_link" href="#">
  <img src="images/heart.svg" alt="">
</a>
  </li>
  <li class="user-list_item">
<a class="user-list_link" href="#">
  <img src="images/user.svg" alt="">
</a>
  </li>
  <li class="user-list_item">
 <a class="user-list_link basket" href="#">
   <img src="images/basket.svg" alt="">
   <p class="basket_num">1</p>
 </a>   
  </li>
</ul>
 </div>
</div>
  </div>
   </div>
   <div class="header_bottom">
<div class="container">
       <ul class="menu-categories">
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Квадроциклы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Катера</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Гидроциклы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Лодки</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Вездеходы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Снегоходы</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Двигатели</a>
    </li>
     <li class="menu-categories_item">
       <a  class="menu-categories_link"href="#">Запчасти</a>
    </li>
       </ul>
     </div>
</div>
  </header>
  <section class="banner-section page-section">
    <div class="container">
      <div class="banner-section_inner">
        <div class="banner-section_slider">
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img"src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img  class="banner-section_slider-img"src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
          </a>
          <a class="banner-section_slider-item"href="#">
            <img class="banner-section_slider-img" src="images/banner-slider.jpg" alt="">
        </a>
        </div>
        <a class="banner-section_item sale-item" href="#">
         <div class="sale-item_top">
           <p class="sale-item_info">
             акция
           </p>
           <div class="sale-item_price">
             <div class="price sale-item_price-new">190 000</div>
             <div class="price sale-item_price-old">226 000</div>
           </div>
         </div>
         <img class="sale-item_img" src="images/content/sale-1.png" alt="">
         <h5 class="sale-item_title">
           Лодочный мотор
           Suzuki DF9.98RS
         </h5>
         <P class="sale-item_footer">
           Акция действует до
           <span>31.08.2024</span>
         </P>
        </a>
      </div>
    </div>
  </section>

  <section class="search page-section">
    <div class="container">
      <div class="search_inner">
        <div class="search_tabs">
          <a  class="search_tabs-item search_tabs-item--active" href="#tab-1">Поиск по номеру</a>
          <a  class="search_tabs-item" href="#tab-2">Поиск по марке</a>
          <a  class="search_tabs-item" href="#tab-3">Поиск по названию товара</a>
        </div>
        <div class="search_content">
          <div id="tab-1" class="search_content-item search_content-item--active">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите номер">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          <div id="tab-2" class="search_content-item">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите марку">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          <div id="tab-3" class="search_content-item">
            <form class="search_content-form">
              <input  class="search_content-input" type="text" placeholder="Введите название товара">
              <button class="search_content-btn"  type="submit">искать</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="categories page-section">
   <div class="container">
     <div class="categories_inner">
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Квадроциклы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-1.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Гидроциклы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-2.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Катера</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-3.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Снегоходы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-4.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Вездеходы</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-5.png" alt="">
        </div>
       </a>
       <a class="categories_item" href="#">
        <div class="categories_item-info">
          <h4 class="categories_item-title">Двигатели</h4>
          <p class="categories_item-text">Подробнее</p>
        </div>
        <div class="categories_item-img">
          <img src="images/categories-6.png" alt="">
        </div>
       </a>
     </div>
   </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

2 Відповідь від vladalert67

  • vladalert67
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 26.04.2022
  • Повідомлень: 8
    • Репутація: 0

Re: Неправильно працює пошук

Перехід на сайт на якому розміщено пошук: https://poetic-torrone-25e3b6.netlify.app/

3 Відповідь від Dmy

  • Dmy
  • Новий користувач
  • Поза форумом
  • Звідки: Порту←Мінськ←Львів
  • Дата реєстрації: 20.12.2021
  • Повідомлень: 16
    • Репутація: 17

Re: Неправильно працює пошук

По-перше, у вас одні поля вкладено в інші. Друге — в першому (хоч друге і приховане), третє — в другому.

Це можна побачити, якщо відкрити сторінку в Інструментах розробника (F12 в більшості браузерів). Ось тут можна побачити структуру: tab-2 зсунуте порівняно з tab-1, тобто воно знаходиться всередині tab-2 (я помітив те, що всередині tab-1, червоною лінією).

https://replace.org.ua/extensions/om_images/img/62684b52a67c7/tab1.png

Щоб це виправити, треба теги, якими закриваються div'и, поставити в іншому порядку.

У вас вони стоять ось так:

<div class="search_content">
  <div id="tab-1" class="search_content-item search_content-item--active">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите номер">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  <div id="tab-2" class="search_content-item">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите марку">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  <div id="tab-3" class="search_content-item">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите название товара">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  </div>
</div>
</div>
</div>

А треба ось так:

<div class="search_content">
  <div id="tab-1" class="search_content-item search_content-item--active">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите номер">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  </div>
  <div id="tab-2" class="search_content-item">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите марку">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  </div>
  <div id="tab-3" class="search_content-item">
    <form class="search_content-form">
      <input  class="search_content-input" type="text" placeholder="Введите название товара">
      <button class="search_content-btn"  type="submit">искать</button>
    </form>
  </div>
</div>

Тобто </div> від tab-1 та tab-2 треба поставити вище, щоб вони закінчуватися перед тим, як почнеться наступний tab.

Подякували: vladalert671