这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。

讯享网

CSS：

<style> #text1{ width: 200px; height: 200px; display: none; background-color: orangered; } #text2{ width: 200px; height: 200px; display: none; background-color: hotpink; } #text3{ width: 200px; height: 200px; display: none; background-color: blue; } </style>

讯享网

HTML：

讯享网<div> <button id="button1" onclick="fun(1)">按钮1</button> <button id="button2" onclick="fun(2)">按钮2</button> <button id="button3" onclick="fun(3)">按钮3</button> </div> <div id="text1">按钮1内容</div> <div id="text2">按钮2内容</div> <div id="text3">按钮3内容</div>

JS：

<script> let on1 = document.getElementById("text1") let on2 = document.getElementById("text2") let on3 = document.getElementById("text3") function fun(cf) { if (cf == 1) { if (on2.style.display == "block" || on3.style.display == "block") { on2.style.display = "none" on3.style.display = "none" } if (on1.style.display == "block"){ on1.style.display = "none" }else { on1.style.display = "block" } } if (cf == 2) { if (on1.style.display == "block" || on3.style.display == "block") { on1.style.display = "none" on3.style.display = "none" } if (on2.style.display == "block"){ on2.style.display = "none" }else { on2.style.display = "block" } } if (cf == 3) { if (on1.style.display == "block" || on2.style.display == "block") { on1.style.display = "none" on2.style.display = "none" } if (on3.style.display == "block"){ on3.style.display = "none" }else { on3.style.display = "block" } } } </script>

还有另一种通俗易懂的方式：

CSS:

讯享网<style> #text1{ width: 200px; height: 200px; display: block; background-color: orangered; } #text2{ width: 200px; height: 200px; display: none; background-color: hotpink; } #text3{ width: 200px; height: 200px; display: none; background-color: blue; } </style>

HTML：

<div> <button id="button1" onclick="yi()">按钮1</button> <button id="button2" onclick="er()">按钮2</button> <button id="button3" onclick="san()">按钮3</button> </div>

JS:

讯享网 let on1 = document.getElementById("text1") let on2 = document.getElementById("text2") let on3 = document.getElementById("text3") function yi() { on1.style.display = 'block' on2.style.display = 'none' on3.style.display = 'none' } function er() { on1.style.display = 'none' on3.style.display = 'none' on2.style.display = 'block' } function san() { on1.style.display = 'none' on2.style.display = 'none' on3.style.display = 'block' }

以上就是本次的选项卡的功能介绍了,有不足的地方请大家多多指点

发现新的地方：

// 已驳回列表选项卡 function rejected_r(){ // 下划线 $('.audit_a').css('border-bottom', 'none') $('.audit_u').css('border-bottom', 'none') $('.audit_d').css('border-bottom', '2px solid #165DFF') // 字体 $('.audit_i').css('color', '#000000') $('.audit_a').css('color', '#000000') $('.audit_t').css('color', '#000000') $('.audit_u').css('color', '#000000') $('.audit_s').css('color', '#165DFF') $('.audit_d').css('color', '#165DFF') // 内容 $('.ListBox').css('display', 'none') $('.newly').css('display', 'none') $('.Awaiting').css('display', 'none') $('.reviewed').css('display', 'none') $('.TurnDown').css('display', 'flex') $('.rejected').css('display', 'flex') }

这里的原本为display: block;会出现样式变动。

为：

The display: block property prevents align-items from having an effect.

Try setting display to something other than block.

译：

block属性可以防止对齐项产生效果。

尝试将显示设置为块以外的其他东西。

display: block

display: block;是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度，内外边距对于四个方向有效。

这里尝试直接为：display: flex;这样就不会出现了。

display: flex
display: flex;是CSS3规范，目前主流浏览器都已支持，是布局的首选方案，该属性值表示此元素会作为弹性盒子显示，在外部表现为block，内部作为弹性盒子使用，弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上，有可能需要使用display:-webkit-box;，也就是内核前缀-box，同样都是弹性盒子，由于各阶段草案命名的原因，其命名从box更改为flex，flex是新的规范属性，此外flex并不能完全替代box，使用这两种方式在实际布局中会存在差异。