如何在单击选项卡时显示内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (85)

我用HTML和CSS来创建选项卡。单击该按钮,内容区域会添加display:block。

CSS使用简单的代码行显示选项卡内容:

#tab11:checked ~ #ctab11,
#tab12:checked ~ #ctab12 {
    display: block;
}
#tab21:checked ~ #ctab21,
#tab22:checked ~ #ctab22 {
    display: block;
}

我的问题是,如何用JS替换那块CSS?这是因为我想使选项卡动态但保持相同的结构

请看并运行下面的代码,谢谢!

.tabsWrapper {
  margin: 5rem 1rem;
  display: inline-block;
  width: 100%;
}
.tab-content {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
}
.tab-title {
    display: none;
}
.tab-label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #bbb;
    border: 1px solid transparent;
}
.tab-label:hover {
    color: #888;
    cursor: pointer;
}
.tab-title:checked + label {
    color: #555;
    border: 1px solid #ddd;
    border-top: 2px solid orange;
    border-bottom: 1px solid #fff;
}


/***** Replace this with vanilla JS ******/
#tab11:checked ~ #ctab11,
#tab12:checked ~ #ctab12 {
    display: block;
}

#tab21:checked ~ #ctab21,
#tab22:checked ~ #ctab22 {
    display: block;
}
/***** Replace this with vanilla JS ******/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="tabsWrapper">

<input id="tab11" type="radio" name="tabs1" class="tab-title" checked>
<label for="tab11" class="tab-label">Title A</label>

<input id="tab12" type="radio" name="tabs1" class="tab-title">
<label for="tab12" class="tab-label">Title B</label>

<section id="ctab11" class="tab-content"> <p>Lorem ipsum dolor sit amet.</p></section>
<section id="ctab12" class="tab-content"> <p>Invidunt menandri duo at, at everti prompta eos.</p></section>

</div>

<div class="tabsWrapper">

<input id="tab21" type="radio" name="tabs2" class="tab-title" checked>
<label for="tab21" class="tab-label">Title A</label>

<input id="tab22" type="radio" name="tabs2" class="tab-title">
<label for="tab22" class="tab-label">Title B</label>

<section id="ctab21" class="tab-content"> <p>Lorem ipsum dolor sit amet.</p></section>
<section id="ctab22" class="tab-content"> <p>Invidunt menandri duo at, at everti prompta eos.</p></section>

</div>
  
</body>
</html>

提问于
用户回答回答于

您可以使用javascript操作样式表

document.getElementById("myDIV").style.display = "none";

参考资料:https://www.w3schools.com/jsref/prop_style_display.asp

热门问答

Tencent iot-sdk-embedded-c在Windows下编译出错:无法解析外部符号?

无聊至极互联网重度用户
推荐已采纳

智能钛机器学习平台的模型怎么从外部调用?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

腾讯云IM调用 add_group_member提示该群不能邀请成员?

推荐已采纳
是什么类型的群?根据相应类型的邀请他人入群的控制项,对照文档看下是否允许邀请他人入群。 参考文档:https://cloud.tencent.com/document/product/269/1502#.E7.BE.A4.E6.88.90.E5.91.98.E6.93.8D.E4...... 展开详请

负载均衡监听器绑定云服务器,其端口状态为异常是什么原因造成的呢?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
端口异常说明是健康检查异常,可以按照如下步骤进行排查: 1. 确保后端RS端口或服务可以正常访问,可以通过curl(七层)或者telnet(四层)测试外网是否可以访问,如果不可访问检查web服务器配置,防火墙和安全组设置; 2. 确保安全组中放行了CLB的VIP,健康检查探测是通...... 展开详请

腾讯云 TRTC 互动直播 云直播 商业直播区别是什么?

人生的旅途辣鸡前端
推荐
云直播:腾讯云的直播云端处理分发平台 移动直播:腾讯云提供的直播推拉流集成的sdk(iOS、Android、小程序) 互动直播:云直播(云端)+移动直播(终端)+连麦功能 商业直播:基于云直播的直播小程序插件(SaaS腾讯云提供页面模板,PaaS客户自己开发) 商业直播和移动直播...... 展开详请

在小程序开通直播功能,是不是还需要业务去申请直播的证书?

推荐
腾讯云有商业直播方案(提供小程序直播插件),客户通过直播插件实现直播业务(不需额外提供直播资质) 插件对接条件: 客户小程序类目为“电商平台”或“在线教育” 所以就是说, 只要用了腾讯云的小程序直播方案, 小程序的类目为 “电商平台” 或“ 在线教育”, 就可以。只要自身业务不...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券