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

2021年2月23日星期二

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

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

2021-02-23

範例

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<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() {
    $("#tabs-nav a").click(function(event) {
        event.preventDefault();
        $("#tabs-nav a").removeClass("tabs-menu-active");
        $(this).addClass("tabs-menu-active");
        $(".tabs-panel").hide();
        var tab_id = $(this).data("target");
        $("#"+tab_id).show();
    });
});
</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

浮雲雅築

2021年2月23日星期二

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

沒有留言:

張貼留言

2021年2月23日 星期二

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

沒有留言:

張貼留言

2021年2月23日星期二