单击元素时如何隐藏或显示所需的块？

raogr8fs 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(322)

我有一个列表菜单。侧栏菜单，此列表的每个li都有自己的id。还有一个.services info块，块位于其中，当您单击与此块对应的.sidebar菜单中的一个项目时，其中一个应该出现。在.services info中的块上，我挂起了.invisible类，该类将它们隐藏起来，并且有一个.visible类带有display:block属性。问题：如何使其在您单击其中一个.sidebar菜单项时，相应的块出现，而不必要的块消失？例如，我单击“名片网站”项目，在.services info（图中红色圆圈）中，相应的块出现（带有.business card类），而上一个块消失，或者我单击“在线商店”项目，它也出现相应的块（带有class.market）。不必要的东西消失了。
网站ct03638.tmweb.ru
代码jsfiddle.net/qhfs7jmb/

.invisible{
    display:  none;
}

.visible {
    display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landin invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

jquery JavaScript Html css

来源：https://stackoverflow.com/questions/68309479/how-to-hide-or-show-the-desired-block-when-clicking-on-an-element

2条答案

按热度按时间

inkz8wg91#

将事件侦听器添加到侧栏 <ul> 收听侧边栏元素上的单击。
当用户单击边栏元素时，事件侦听器将查找所单击元素的id，并使用该id构造一个查询选择器来选择所需的内容 <div> .
然后添加 invisible 类并删除所有内容上的“可见”类 <div> ，并最终在所需内容上设置“visible”类 <div> 你只需搜索 visible 内容阻止并改变这一点，但过去的经验告诉我，不管怎样，都要隐藏我不想要的一切。
你需要的代码应该附在里面 <script> 标签并添加到页面底部。

document.querySelector('ul.sidebar-menu').addEventListener('click',function(e){
        e.preventDefault();
        // The <a> element was clicked, but we need the ID from the enclosing <li> element
        let clickedId = e.target.closest('li').id;
        // Set all the content elements to invisible (saves trying to find the visible one)
        let contentDivs = document.querySelectorAll('div.services-info>div.content>div');
        contentDivs.forEach((el)=>{el.classList.remove('visible'); el.classList.add('invisible')});
        // Now, using the ID from the <li>, create a query selector to find the content <div>
        let targetSelector = 'div.services-info>div.content>div.'+clickedId;
        // Set that element visible
        document.querySelector(targetSelector).classList.add('visible');
    });

.invisible{
    display:  none;
}

.visible {
    display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landing invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

赞(0）回复(0）举报 2021-09-13

lyr7nygr2#

一种方法是使用选定菜单项id设置属性 body 元素和在css中显示具有相同类名的元素。单击菜单项时要显示的节必须与的id具有相同的类名 <li> 项目：

const menu = document.querySelectorAll(".sidebar-menu li > a"),
      onClick = e =>
      {
        e.preventDefault();
        //get ID from <li> element and add to the body "show" attribute
        document.body.setAttribute("show", e.target.parentNode.id);
      };

for(let i = 0; i < menu.length; i++)
  menu[i].addEventListener("click", onClick);

.services-info .content > div
{
  display: none;
}

body[show="business-card"] .business-card,
body[show="landing"] .landing,
body[show="market"] .market,
body[show="corp"] .corp,
body[show="bitrix"] .bitrix,
body[show="advertising"] .advertising,
body[show="seo"] .seo,
body[show="promotion"] .promotion,
body[show="marketing"] .marketing
{
  display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landing invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

赞(0）回复(0）举报 2021-09-13

我来回答

单击元素时如何隐藏或显示所需的块？

2条答案

相关问题

热门标签

最新问答