模板:测试性加泰罗尼亚标签

来自23世纪百科
  • <a href="#tab1">标签一</a>
  • <a href="#tab2">标签二</a>
  • <a href="#tab3">标签三</a>
标题1 标题2
内容1 内容2
内容3 内容4

这是第二个标签页的内容。

这是第三个标签页的内容。

<style> /* --- 以下为样式表，控制标签页的外观 --- */ .tab-container { 

 font-family: sans-serif;

}

/* 标签导航样式 */ .tab-nav { 

 list-style: none;
 padding: 0;
 margin: 0 0 -1px 0; /* 让导航和内容边框重叠 */
 display: flex;
 gap: 2px;

} .tab-nav li { 

 margin: 0;

} .tab-nav a { 

 display: block;
 padding: 8px 16px;
 background: #f8f9fa;
 border: 1px solid #a2a9b1;
 border-bottom: none;
 text-decoration: none;
 color: #0645ad;
 border-radius: 4px 4px 0 0;

} /* 被点击的标签（激活状态）高亮 */ .tab-nav a:target { 

 background: #ffffff;
 border-bottom: 1px solid #ffffff;
 font-weight: bold;

} /* 为了让标签在未点击时也有链接效果 */ .tab-nav a:hover { 

 background: #eaeef2;

}

/* 内容面板容器样式 */ .tab-content { 

 border: 1px solid #a2a9b1;
 padding: 16px;
 background: #ffffff;

}

/* 每个内容面板默认隐藏 */ .tab-pane { 

 display: none;

}

/* 只有当年URL片段匹配时，对应的面板才显示 */ .tab-pane:target { 

 display: block;

}

/* 为了让页面加载时默认显示第一个面板 */

  1. tab1 {
 display: block;

} /* 但如果URL片段指向了其他面板，则隐藏第一个，显示指定的 */

  1. tab1:target {
 display: none;

}

  1. tab1:target ~ .tab-pane:not(:target) {
 display: none;

} </style>

取自“https://wiki.23shiji.net/index.php?title=模板:测试性加泰罗尼亚标签&oldid=2398”