代码之家  ›  专栏  ›  技术社区  ›  Dev M

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

css html javascript
  •  3
  • Dev M  · 技术社区  · 6 年前

    我想在我的网页上创建一个居中的标签页。我尝试了在这个网站上找到的几种解决方案,但效果不太好。

    我用标签作为按钮,这是一个完整的页面标签。 下面是我的代码片段,希望你能帮助我。 

    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>
    3 回复  |  直到 6 年前
        1
  •  1
  •   Gautam Naik    6 年前

    只需更新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>
        2
  •  1
  •   SamVK    6 年前

    现在最简单的对齐内容的方法通常是 "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 如果您希望标签居中但分散在周围,或者查看 some of its other values

        3
  •  0
  •   Amin Memariani    6 年前

    这就是你要找的吗? 

    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>

    <!-- 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>
</center>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    3 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    3 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    3 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    3 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    3 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    4 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    4 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    4 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号