javascript - 单击关闭选项卡

Question

我正在尝试在我的网站上创建一个选项卡功能，我希望该选项卡具有响应能力。所以我做了这样的代码:

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">&times</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">&times</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">&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

现在我有两件事，

• 首先是我希望在点击标题时关闭标签(伦敦，巴黎、东京)，然后在它被点击了。

• 其次，我希望在行，第三个在第二行，然后点击打开右边在单击的选项卡下方，并将第三个选项卡向下推。

任何提示都会有所帮助，提前致谢

Answer 1

为您发行编号。 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">&times</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">&times</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">&times</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