在下拉菜单中单击选项时显示隐藏选项卡

Question

我想在点击下拉列表时显示隐藏选项卡。嗯，我搜索了codepen和其他地方，但没有找到任何类似的东西。

但幸运的是，我在一个营销博客上找到了。

我分享这个链接，这样你就可以看到我在说什么。我还分享了一张图片，如果它。

如果有人可以帮助我与功能结构和JS。然后把内容放到制表符里面。

页面链接

我想创建的部分的屏幕截图，随后与JS链接

提前感谢!

Answer 1

已更新(2)

方式一(与正常选择)

注意:确保option的value和tab的tab-name相同

选择

<option>TAB NAME</option> <!--Value returns TAB NAME -->
<option value="tabNam2">TAB NAME TWO</option> <!--Value returns tabNam2-->

标签

<div tab-name="TAB NAME" class="tabcontent d-none"></div>    
<div tab-name="tabNam2" class="tabcontent d-none"></div>

试试这个，这是你需要的吗

function openPage(id){
const p = document.querySelector("[tab-name='"+id+"']");
const tabs = document.querySelectorAll(".tabs .tabcontent");
for(var  x =0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if(p !== null){
p.classList.remove("d-none");
}


}

.d-none{ display:none; }

<select onchange="openPage(this.value)">
<option value="tabOne">Tab One</option>
<option value="tabTwo">Tab Two</option>
<option value="tabThree">Tab Three</option>
</select>
<div class="tabs">
<div tab-name="tabOne" class="tabcontent">
<h3>Tab One</h3>
<p>11111111111</p>
</div>

<div tab-name="tabTwo" class="tabcontent d-none">
<h3>Tab Two</h3>
<p>22222222222</p>
</div>
<div tab-name="tabThree" class="tabcontent d-none">
<h3>Tab Three</h3>
<p>33333333333</p>
</div>
</div>

方式二(With Styleda)

自定义下拉列表:W3 Schools help from @MohsenNewtoa

setButtonInnerText(document.querySelector(".dropbtn"))
function openPage(id, a){
const p = document.querySelector("[tab-name='"+id+"']");
const tabs = document.querySelectorAll(".tabs .tabcontent");
for(var  x =0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if(p !== null){
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}  
}
function toggleDrop(drop){
drop.classList.toggle("d-none");
drop.onclick = function(e){ drop.classList.add("d-none"); } 
}
function setButtonInnerText(btn){
const firstOption = btn.parentElement.querySelector("#drop a:first-child");
btn.innerHTML = firstOption.innerHTML;
}

.d-none{ display:none; }
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}

<div class="dropdown">
<button onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn"></button>
<div id="drop" class="dropdown-content d-none">
<a href="#" onclick="openPage('tabOne', this)">Tab One</a>
<a href="#" onclick="openPage('tabTwo', this)">Tab Two</a>
<a href="#" onclick="openPage('tabThree', this)">Tab Three</a>
</div>
</div>
<div class="tabs">
<div tab-name="tabOne" class="tabcontent">
<h3>Tab One</h3>
<p>Home is where the heart is..</p>
</div>
<div tab-name="tabTwo" class="tabcontent d-none">
<h3>Tab Two</h3>
<p>Some news this fine day!</p>
</div>

<div tab-name="tabThree" class="tabcontent d-none">
<h3>Tab Three</h3>
<p>Some news this fine day!</p>
</div>
</div>