您现在的位置是：首页 > 技术教程 正文

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

admin 阅读： 2024-03-27
后台-插件-广告管理-内容页头部广告（手机）

一、在一个页面（不跨页面）

效果：

代码 

  1. html>
  2. <html>
  3. <head>
  4. <style>
  5. /* 设置标签页外层容器样式 */
  6. .tab-container {
  7. width: 100%;
  8. background-color: #f1f1f1;
  9. overflow: hidden;
  10. }
  12. /* 设置标签页选项卡的样式 */
  13. .tab {
  14. float: left;
  15. padding: 8px 16px;
  16. background-color: #ccc;
  17. cursor: pointer;
  18. }
  20. /* 设置选中的标签页样式 */
  21. .active {
  22. background-color: #aaa;
  23. }
  25. /* 设置标签页内容的样式 */
  26. .tab-content {
  27. display: none;
  28. padding: 16px;
  29. background-color: #fff;
  30. }
  31. style>
  32. head>
  33. <body>
  34. <div class="tab-container">
  36. <div class="tab active" onclick="openTab(event,'tab1')">标签页1div>
  37. <div class="tab" onclick="openTab(event,'tab2')">标签页2div>
  38. <div class="tab" onclick="openTab(event,'tab3')">标签页3div>
  41. <div id="tab1" class="tab-content" style="display:block;">
  42. <h3>标签页1内容h3>
  43. <p>这是标签页1的内容。p>
  44. div>
  45. <div id="tab2" class="tab-content">
  46. <h3>标签页2内容h3>
  47. <p>这是标签页2的内容。p>
  48. div>
  49. <div id="tab3" class="tab-content">
  50. <h3>标签页3内容h3>
  51. <p>这是标签页3的内容。p>
  52. div>
  53. div>
  55. <script>
  56. function openTab(event, tabName) {
  57. // 获取所有标签页内容元素
  58. var tabContent = document.getElementsByClassName("tab-content");
  60. // 隐藏所有标签页内容
  61. for (var i = 0; i < tabContent.length; i++) {
  62. tabContent[i].style.display = "none";
  63. }
  65. // 移除所有标签页选项卡的 active 类
  66. var tabs = document.getElementsByClassName("tab");
  67. for (var i = 0; i < tabs.length; i++) {
  68. tabs[i].className = tabs[i].className.replace(" active", "");
  69. }
  71. // 显示当前选中标签页内容
  72. document.getElementById(tabName).style.display = "block";
  74. // 添加 active 类到当前选中标签页选项卡
  75. event.currentTarget.className += " active";
  76. }
  77. script>
  78. body>
  79. html>

 二、Tab标签，跨页面效果

效果

 代码

首页

  1. html>
  2. <html>
  3. <head>
  4. <style>
  5. .tab {
  6. display: inline-block;
  7. padding: 8px;
  8. background-color: #f2f2f2;
  9. cursor: pointer;
  10. }
  12. .tab.active {
  13. background-color: #ccc;
  14. }
  16. #content {
  17. border: 1px solid #ccc;
  18. padding: 10px;
  19. height: 400px;
  20. overflow: auto;
  21. }
  22. style>
  23. head>
  24. <body>
  25. <div id="tabs">div>
  26. <div id="content">div>
  28. <script>
  29. // 示例超链接列表数据
  30. var links = [
  31. { title: '页面一', url: 'page1.html' },
  32. { title: '页面二', url: 'page2.html' },
  33. { title: '页面三', url: 'page3.html' }
  34. ];
  36. var tabsContainer = document.getElementById('tabs');
  37. var contentContainer = document.getElementById('content');
  39. // 创建标签页和加载内容函数
  40. function createTabAndLoadContent(title, url) {
  41. var tab = document.createElement('div');
  42. tab.innerText = title;
  43. tab.className = 'tab';
  45. // 点击标签页切换内容
  46. tab.addEventListener('click', function() {
  47. loadContent(url);
  48. setActiveTab(tab);
  49. });
  51. tabsContainer.appendChild(tab);
  52. }
  54. // 加载内容到右侧窗口
  55. function loadContent(url) {
  56. contentContainer.innerHTML = '加载中...';
  58. // 模拟异步加载页面内容
  59. setTimeout(function() {
  60. // 使用iframe展示页面内容
  61. contentContainer.innerHTML = '