纯css实现点击显示不同div内容。

.navbar .search-right .pop-overlay:target {    visibility: visible;    opacity: 1; }  

自己可以举一反三。

  <a href="#search" class="btn search-btn" title="search"><span class="fas fa-search me-2" aria-hidden="true"></span></a>

    <!-- search popup -->

    <div id="search" class="pop-overlay">

      <a class="close" href="#search1">×</a>

        <div class="popup">

            <h3 class="title-mimi two mb-4 text-left">Search</h3>

            <form action="{pboot:scaction}"  method="get"class="search-box d-flex position-relative">

                <input type="search" placeholder="Enter Keyword" name="keyword" required="required" autofocus="">

                <button type="submit" class="btn"><span class="fas fa-search" aria-hidden="true"></span></button>

            </form>

        </div>      

    </div>

    <div id="search1" class="pop-overlay">

sfsd

    </div>