Javascript 如何使两个HTML按钮同时处于活动状态_Javascript_Html_Css_Button_Tabs

Javascript 如何使两个HTML按钮同时处于活动状态

javascript html css button tabs

Javascript 如何使两个HTML按钮同时处于活动状态,javascript,html,css,button,tabs,Javascript,Html,Css,Button,Tabs,我遵循本教程制作可单击的选项卡做水平和垂直的。我想同时激活两个按钮。例如，如果任何水平按钮处于活动状态（数字小于6），则第一个垂直按钮（数字6）处于活动状态，反之亦然。如果第六个按钮处于活动状态，则第一个水平按钮也处于活动状态。我尝试过这样添加类，但之后的活动类无法删除： tablinks[6].className = tablinks[6].className.replace("", " active"); 我怎样才能做到这一点以下是完整的代码： <!doctype html&g

我遵循本教程制作可单击的选项卡做水平和垂直的。我想同时激活两个按钮。例如，如果任何水平按钮处于活动状态（数字小于6），则第一个垂直按钮（数字6）处于活动状态，反之亦然。如果第六个按钮处于活动状态，则第一个水平按钮也处于活动状态。我尝试过这样添加类，但之后的活动类无法删除：

tablinks[6].className = tablinks[6].className.replace("", " active");

我怎样才能做到这一点

以下是完整的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main</title>
<style>
    /* Style the tab */
div.tab {
    overflow: hidden;
    margin-top: 4%;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}



/* Create an active/current tablink class */
div.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 bar content */
body {margin:0}
#bar {
    position: absolute;
    padding-top: 3cm;
}
.icon-bar {
    width: 40px;
}

div.icon-bar button {
    background-color: #f1f1f1;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 15px;
}
div.icon-bar button.active {
    background-color: steelblue !important;
    color: white;
}
i{
    width: 20px;
    background-color: inherit;
    padding: 15px;
    color: black;
    font-size: 25px;
}


</style>
<script>
function openCity(evt, cityName, numero) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    if(numero <6){
        //no idea what to do here
    }

    console.log(document.getElementById("wiki").classList);
    console.log(tablinks);
    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
</head>

<body>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'trends', 0);">Google Trends</button>
      <button class="tablinks" onclick="openCity(event, 'youtube', 1);">YouTube</button>
      <button class="tablinks" onclick="openCity(event, 'books_ah', 2);">OL Books(A&H)</button>
      <button class="tablinks" onclick="openCity(event, 'books_all', 3);">OL Books All</button> 
      <button class="tablinks" onclick="openCity(event, 'wos_all', 4);">WoS(all)</button>
      <button class="tablinks" onclick="openCity(event, 'wos_ah', 5);">WoS(A&H)</button>
    </div>

    <div id = "bar">
        <div class="icon-bar">
            <button class="tablinks" onclick="openCity(event, 'wiki', 6);"><i class="fa fa-wikipedia-w"></i></button>
            <button class="tablinks" onclick="openCity(event, 'youtube_table', 7);"><i class="fa fa-youtube-play"></i></button>
            <button class="tablinks" onclick="openCity(event, 'books_table', 8);"><i class="fa fa-book"></i></button>
            <button class="tablinks" onclick="openCity(event, 'method', 9);"><i class="fa fa-calculator"></i></button>  
            <button class="tablinks" onclick="openCity(event, 'dataset', 10);"><i class="fa fa-database"></i></button>
            <button class="tablinks" onclick="openCity(event, 'about', 11);"><i class="fa fa-info-circle"></i></button>
        </div>
    </div> 

    <div id="trends" class="tabcontent">
        <object data="./images/Trends.html" width="1200" height="900">Warning: Trends.html could not be included!</object>
    </div>

    <div id="youtube" class="tabcontent">
        <object data="./images/Youtube.html" width="1200" height="900">Warning: Youtube.html could not be included!</object>
    </div>

    <div id="books_ah" class="tabcontent">
        <object data="./images/OLbooks.html" width="1200" height="900">Warning: OLbooks.html could not be included!</object>
    </div>

    <div id="books_all" class="tabcontent">
        <object data="./images/OLbooks_all.html" width="1200" height="900">Warning: OLbooks_all.html could not be included!</object>
    </div>

    <div id="wos_ah" class="tabcontent">
        <object data="./images/Wos_AH.html" width="1200" height="900">Warning: wos_ah.html could not be included!</object>
    </div>

    <div id="wos_all" class="tabcontent">
    <object data="./images/Wos_all.html" width="1200" height="900">Warning: wos_all.html could not be included!</object>
    </div>

    <div id="wiki" class="tabcontent">
    <object data="./images/Trends.html" width="1200" height="900">Warning: Trends.html could not be included!</object>
    </div>

    <div id="youtube_table" class="tabcontent">
    <object data="./images/table2.html" width="1200" height="900">Warning: table2.html could not be included!</object>
    </div>

    <div id="books_table" class="tabcontent">
    <object data="./images/table3.html" width="1200" height="900">Warning: table3.html could not be included!</object>
    </div>

    <div id="method" class="tabcontent">
    <object data="./images/methodology.html" width="1200" height="900">Warning: methodology.html could not be included!</object>
    </div>

    <div id="dataset" class="tabcontent">
    <object data="./images/dataset.html" width="1200" height="900">Warning: dataset.html could not be included!</object>
    </div>

    <div id="about" class="tabcontent">
    <object data="./images/about.html" width="1200" height="900">Warning: about.html could not be included!</object>
    </div>

    <script>document.getElementsByClassName('tablinks')[0].click()</script>
</body>
</html>


主要
/*设置选项卡的样式*/
分区选项卡{
溢出：隐藏；
利润率最高：4%；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
div.tab按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
}
/*创建活动/当前tablink类*/
div.tab按钮.active{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
/*设置栏内容的样式*/
正文{页边距：0}
#酒吧{
位置：绝对位置；
垫面：3厘米；
}
.图标栏{
宽度：40px；
}
分区图标栏按钮{
背景色：#f1f1；
浮动：左；
边界：无；
大纲：无；
光标：指针；
过渡：0.3s；
字体大小：15px；
}
div.icon-bar按钮。激活{
背景色：钢蓝色！重要；
颜色：白色；
}
我{
宽度：20px；
背景色：继承；
填充：15px；
颜色：黑色；
字体大小：25px；
}
函数openCity（evt、cityName、numero）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i如果（numero如果我没有弄错，您正试图为所有活动的垂直按钮突出显示第一个水平按钮，并为所有活动的水平按钮突出显示第一个垂直按钮。如果是这样，这应该可以做到
if(numero <6){
  tablinks[6].classList.add('active');
} else {
  tablinks[0].classList.add('active');
}

if（numero hi）为该评论喝彩，它在第一次单击时变为活动状态，但在第二次单击后，另一个垂直按钮变为活动状态，随后第三个按钮变为活动状态，直到所有按钮都高亮显示。如何避免这种情况？