logo标签列表

如何使用CSS和JavaScript使选项卡居中？

javascripthtmlcss
4
我想在我的网页上创建一个居中的选项卡。我尝试了这个网站上找到的几种解决方案，但它们对我来说都不太有效。
我将选项卡用作按钮，并且它是一个全页面选项卡。我的代码很简单，我还添加了注释以更好地理解。以下是我的片段代码，希望你能帮助我。 

function openPage(evt, pageName) {
    // 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", "");
    }

    // Show current tab, and add an "active" class to the button that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
/* Full page tabs */
body,html {
    height: 100%;
    margin: 0;
    font-family: Arial;
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
}
/* Background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
    border-bottom: 3px solid #FFFFFF;
    color: #E1FBFF;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #EEEEEE;
    height: 100%;
}
<!-- Tab links -->
<div class="tab">
  <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button>
  <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button>
  <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button>
</div>

<!-- Tab content -->
<div id="tab1" class="tabcontent">
  <h3>Tab1</h3>
</div>
<div id="tab2" class="tabcontent">
  <h3>Tab2</h3>
</div>
<div id="tab3" class="tabcontent">
  <h3>Tab3</h3>
</div>

你想要选项卡宽度对齐吗？ - Amit Kumar Gupta
如果你要使用边框样式，你可能需要在.tab button中添加类似于border-bottom: 3px solid transparent;的内容，这样当活动边框从一个选项卡切换到另一个选项卡时，它们就不会跳动了。 - SamVK
你可以使用Flex。 - hamidb80
3个回答
1
现在最简单的对齐内容的方法通常是使用"Flexbox"，在这种情况下使用justify-content。
.tab {
  display: flex;
  justify-content: center; // centers its children
}


function openPage(evt, pageName) {
    // 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", "");
    }

    // Show current tab, and add an "active" class to the button that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
/* Full page tabs */
body,html {
    height: 100%;
    margin: 0;
    font-family: Arial;
}
/* Style the tab */
.tab {
    display: flex;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
}
/* Background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
    border-bottom: 3px solid #FFFFFF;
    color: #E1FBFF;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #EEEEEE;
    height: 100%;
}
<!-- Tab links -->
<div class="tab">
  <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button>
  <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button>
  <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button>
</div>

<!-- Tab content -->
<div id="tab1" class="tabcontent">
  <h3>Tab1</h3>
</div>
<div id="tab2" class="tabcontent">
  <h3>Tab2</h3>
</div>
<div id="tab3" class="tabcontent">
  <h3>Tab3</h3>
</div>

如果您希望标签居中但分布在周围，也可以使用justify-content: space-around，或者查看其他值。

你只更改了 .tab { ... } 类吗？我也尝试过 justify-content: space-around; 但对我来说没有生效。 - Dev M
1
只需要更新您的CSS的这一部分即可。
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align:center; /*add this to center the buttons*/
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    /*float: left;*/ /*remove floats*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
     border-bottom: 3px solid transparent;/*Add this to prevent flickering/jumping*/
}


function openPage(evt, pageName) {
    // 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", "");
    }

    // Show current tab, and add an "active" class to the button that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
/* Full page tabs */
body,html {
    height: 100%;
    margin: 0;
    font-family: Arial;
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align:center;
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    /*float: left;*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
     border-bottom: 3px solid transparent;
}
/* Background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
    border-bottom: 3px solid #FFFFFF;
    color: #E1FBFF;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #EEEEEE;
    height: 100%;
}
<!-- Tab links -->
<div class="tab">
  <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button>
  <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button>
  <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button>
</div>

<!-- Tab content -->
<div id="tab1" class="tabcontent">
  <h3>Tab1</h3>
</div>
<div id="tab2" class="tabcontent">
  <h3>Tab2</h3>
</div>
<div id="tab3" class="tabcontent">
  <h3>Tab3</h3>
</div>

0

这是你要找的吗？

function openPage(evt, pageName) {
    // 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", "");
    }

    // Show current tab, and add an "active" class to the button that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
/* Full page tabs */
body,html {
    height: 100%;
    margin: 0;
    font-family: Arial;
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    float: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
}
/* Background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
    border-bottom: 3px solid #FFFFFF;
    color: #E1FBFF;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #EEEEEE;
    height: 100%;
}
<center>
    <!-- Tab links -->
    <div class="tab">
      <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button>
      <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button>
      <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button>
    </div>
    </center>

    <!-- Tab content -->
    <div id="tab1" class="tabcontent">
      <h3>Tab1</h3>
    </div>
    <div id="tab2" class="tabcontent">
      <h3>Tab2</h3>
    </div>
    <div id="tab3" class="tabcontent">
      <h3>Tab3</h3>
    </div>

谢谢。你能指出你在代码中做了什么更改吗？ - Dev M
我在你的HTML中添加了<center>标签，并在你的CSS中添加了float:center。 - Amin Memariani
但是CSS的浮动属性没有“center”值。CSS语法为 float: none | left | right | initial | inherit; - Dev M
由于<center>可以使所有内容居中，因此请直接返回翻译后的文本。 - Amin Memariani
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接