gpt4 book ai didi

javascript - 如何使用 jQuery 创建选项卡

转载 作者:行者123 更新时间:2023-11-28 03:09:22 25 4
gpt4 key购买 nike

如图所示,我有四个不同的类别 block ,我想要做的是:

最初我只想看到“fryking”的内容,然后如果我点击不同的 block 比如“Halal”,它的内容必须显示在下面,而fryking等其他框的内容需要消失.

我正在努力思考如何做到这一点,所以我真的希望有人能提供帮助。

以下是我目前的情况:

#menu_list {
display: flex;
}
.box{
width: 300px;
height: 200px;
}
.one{
background: red;
}
.two{
background: blue;
}
.three{
background: black;
}
<section id="menu_list">
<div class=" box one active fryking">
FRYKING
</div>
<div class="box two">
HALAAL
</div>
<div class="box three">

</div>
</section>
<section id="menus">
<div class="fryking active" id="fryking">
<h3 class="cat_title">Combos</h3>
<div class="cat_content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of </p>
</div><h3 class="cat_title">FIsh &amp; Chips</h3>
<div class="cat_content">
<p>What is Lorem Ipsum?<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

<div class="halaal" id="halaal">
<h3 class="cat_title">Masala Dosa</h3>
<div class="cat_content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero,</p>
</div>
</div>
</section>

我看到了这个pen here但是我的元素结构不同,我不能真正改变,因为它是一个 wordpress 网站

最佳答案

I saw this pen here but the structure of my project is different and I cannot really change cause its a wordpress site

我不明白结构有什么问题?

如果你想创建一个手动选项卡,你可以创建一个这样的 css 类:

.no-display{
display : none;
}

在你的 jquery 中,你只需要使用类名:

$('.ul.tabs').removeClass('no-display'); 
$('.ul.tabs').addClass('no-display');

简单快速,

和平

关于javascript - 如何使用 jQuery 创建选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45793823/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com