浮雲雅築: [研究] 頁籤(tab) (HTML+CSS+JavaScript)

2021年2月23日星期二

[研究] 頁籤(tab) (HTML+CSS+JavaScript)

[研究] 頁籤(tab) (HTML+CSS+JavaScript)

2021-02-23

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

/* 頁籤的內容框寬度 */
div#hcg_tabs {
    width: 100%;
}
/* 頁籤的標籤基本設定 */
div#tabs-nav {
    position: relative;
    display: flex;
    justify-content: flex-start;
}
/* 頁籤的標籤間隔 */
div#tabs-nav a:nth-child(even) {
    margin: 0 3px;
}

/* 頁籤的標籤設定 */
a.tabs-menu {
    display: inline-block;
    background-color: #1179ac;
    font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    text-decoration: none;
    border: solid 2px #1179ac;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

/* 被選的頁籤白色顯示 */
a.tabs-menu.tabs-menu-active {
    background-color: #fff;
    border: solid 2px #1179ac;
    color: #6b6b6b;
    border-bottom: 0;
}

/* 頁籤的內容框 */
.tabs-content {
    border: solid 2px #1179ac;
    margin-top: -2px;
    background-color: #fff;
    overflow: hidden;
    line-height: 1.5;
}

/* 避免一開始全部顯示 */
.tabs-panel {
    display: none;
    min-height: 150px;
    overflow: auto;
    padding: 10px;
    height: 200px;
    font-size: 14px;
}
</style>
</head>
<body>
<div id="hcg_tabs">

 <div id="tabs-nav">
    <a href="#" data-target="tab_1" class="tabs-menu tabs-menu-active">Tab 1</a>
    <a href="#" data-target="tab_2" class="tabs-menu">Tab 2</a>
    <a href="#" data-target="tab_3" class="tabs-menu">Tab 3</a>
 </div>

 <div class="tabs-content">
   <div id="tab_1" class="tabs-panel" style="display:block">
    內容1
   </div>

   <div id="tab_2" class="tabs-panel">
    內容2
   </div>

   <div id="tab_3" class="tabs-panel">
    內容3
   </div>

 </div>

</div>

<script>
(function () {
    var tabs_menu = document.getElementsByClassName("tabs-menu");
    for (var k = 0; k < tabs_menu.length; k++) {
        tabs_menu[k].onclick = js_tabs;
    }
    function js_tabs() {
        var tab_id = this.getAttribute("data-target");
        var tabs_panel = document.getElementsByClassName("tabs-panel");

        for (var i = 0; i < tabs_panel.length; i++) {
            tabs_panel[i].style.display = "none";
        }
        for (var j = 0; j < tabs_menu.length; j++) {
            tabs_menu[j].className = tabs_menu[j].className.replace(" tabs-menu-active", "");
        }
        this.className += " tabs-menu-active";
        document.getElementById(tab_id).style.display = "block";
        return false;
    }
})();
</script>

</body>
</html>

(完)

相關

[研究] 頁籤(tab) (HTML + jQuery 3.5.1 + Bootstrap 3.4.1)
https://shaurong.blogspot.com/2021/02/tab-html-jquery-351-bootstrap-341.html

[研究] 頁籤(tab) (HTML + CSS3)
https://shaurong.blogspot.com/2021/02/tab-html-css3.html

[研究] 頁籤(tab) ( HTML + CSS + JavaScript + jQuery + jQuery UI)
https://shaurong.blogspot.com/2021/02/tab-html-css-javascript-jquery-jquery-ui.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript+jQuery)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascriptjquery.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascript.html

Online HTML Code Generator | CSS Code Generator | JavaScript
https://www.html-code-generator.com/

JQuery Tabs Generator
https://www.html-code-generator.com/jquery/tabs-generator

Tabs | jQuery UI
https://jqueryui.com/tabs/

Tabs Widget | jQuery UI 1.8 Documentation
https://api.jqueryui.com/1.8/tabs/

Top Tabs Generator
https://www.pagecolumn.com/tool/top_tabs_generator.htm

Review techniques of making tabs with CSS
https://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm

Tab Menu - Online Tab Menu builder
http://www.menucool.com/horizontal/tab-menu

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換 | 梅問題．教學網https://www.minwt.com/webdesign-dev/css/16987.html

bootstrap頁籤
https://codepen.io/fenture/pen/pWEMdR

使用Jquery特效做出Tab頁籤切換效果
https://www.webdesigns.com.tw/jquery_tab.asp

浮雲雅築

2021年2月23日星期二

[研究] 頁籤(tab) (HTML+CSS+JavaScript)

沒有留言:

張貼留言

2021年2月23日 星期二

[研究] 頁籤(tab) (HTML+CSS+JavaScript)

沒有留言:

張貼留言

2021年2月23日星期二