2021年2月23日 星期二

[研究] 頁籤(tab) (HTML + jQuery 3.5.1 + Bootstrap 3.4.1)

[研究] 頁籤(tab) (HTML + jQuery 3.5.1 + Bootstrap 3.4.1)

2021-02-23

<meta charset="utf-8"> 這行要有，否則 Chrome 88正常，IE11 亂碼。

參考

https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>內容</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>內容1</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>內容2</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>內容3</p>
    </div>
  </div>
</div>

</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

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)