双击事件不起作用

Question

我在我的网站上有一个标签菜单，用于它的代码工作得很好。JavaScript：

function openTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "flex";
}

HTML：

<div class="col-md-4">
    <div onclick="openTab('tab-1')" class="tab-button">
        <h5>IT Problems</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-2')" class="tab-button">
        <h5>Save Time</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-3')" class="tab-button">
        <h5>Cost Effective</h5>
    </div>
</div>

显然，我将I ("tab-1/2/3")和类("tab")应用到了我想要作为选项卡的div上。但是，当我复制完全相同的代码，为当前打开的选项卡突出显示选项卡按钮时，它不起作用。JavaScript：

function selectedTab(selectName) {
    var i;
    var x = document.getElementsByClassName("select");
    for (i = 0; i < x.length; i++) {
        x[i].style.border-bottom-color = "#dbdbdb";
    }
    document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}

HTML：

<div class="col-md-4">
    <div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
        <h5 id="select-1" class="select">IT Problems</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
        <h5 id="select-2" class="select">Save Time</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
        <h5 id="select-3" class="select">Cost Effective</h5>
    </div>
</div>

我几乎在网上到处找过，有很多人看过这个问题，但没有人能找到解决方案。有人能帮上忙吗？

Answer 1

border-bottom-color不是有效的样式属性，您需要将连字符大小写替换为驼峰大小写

您需要在selectTab方法中使用style的borderBottomColor属性

function selectedTab(selectName) {
    var x = document.getElementsByClassName("select");
    for (var i = 0; i < x.length; i++) {
        x[i].style.borderBottomColor = "#dbdbdb"; //observe style property Change
    }
    document.getElementById(selectName).style.borderBottomColor  = "#25a7df";
}