我正在尝试在我的网站上创建一个选项卡功能,我希望该选项卡具有响应能力。所以我做了这样的代码:
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 28px;
}
.topright:hover {color: red;}
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">×</span>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
现在我有两件事,
首先是我希望在点击标题时关闭标签(伦敦, 巴黎、东京),然后在 它被点击了。
其次,我希望在 行,第三个在第二行,然后点击打开右边 在单击的选项卡下方,并将第三个选项卡向下推。
任何提示都会有所帮助,提前致谢
最佳答案
为您发行编号。 1,你可以从“openCity”更改为“toggleCity”,通过检查当前城市是否显示 ->然后你隐藏,否则你显示它。
function toggleCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
var prev_state_display = document.getElementById(cityName).style.display;
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
if( prev_state_display === "none"){
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
} else {
document.getElementById(cityName).style.display = "none";
evt.currentTarget.className.replace(" active", "");
}
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 28px;
}
.topright:hover {color: red;}
<div class="tab">
<button class="tablinks" onclick="toggleCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="toggleCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="toggleCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<span onclick="toggleCity(event, 'London')" class="topright">×</span>
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<span onclick="toggleCity(event, 'Paris')" class="topright">×</span>
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<span onclick="toggleCity(event, 'Tokyo')" class="topright">×</span>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
关于您的问题没有。 2,在这里你可以看到一个用“错误代码”编写的示例,只是为了让你走上正轨。如果您调整 iframe 容器的宽度,它会像您要求的那样运行。
虽然它需要一个很好的评论。 LINK
代码分为两部分,但在 float 的帮助下显示为单个部分。
检查@media
在 CSS 代码的底部。
PS 我使用了一些 jquery 代码,因为我得到了一些关于未定义 toggleCity
函数的错误..
jQuery 方式
这里是您如何使用 jQuery 做到这一点。只需添加如下CSS样式即可
.tabcontent.active {显示: block }
同时将 HTML5 data
属性添加到 .tablinks
,这是脚本
$('.tablinks').on('click', function(){
let target_id = $(this).data('target');
$('.tablinks, .tabcontent').removeClass('active');
$(this).addClass('active');
$(target_id).addClass('active');
});
$('.close-tab').on('click', function(){
$('.tablinks, .tabcontent').removeClass('active');
});
$("#defaultOpen").click();
--> Working Fiddle
关于javascript - 单击关闭选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49706088/