[研究] 頁籤(tab) (HTML + CSS3)
2021-02-23
<meta charset="utf-8"> 這行要有，否則 Chrome 88正常，IE11 亂碼。
參考
CSS :target Selector
https://www.w3schools.com/cssref/sel_target.asp
<<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<style>
.tab div {
display: none;
}
.tab div:target {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<div id="link1">
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</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
沒有留言:
張貼留言