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

news2024/12/27 5:22:17

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

效果：

代码 

<!DOCTYPE html>
<html>
    <head>
        <style>
        /* 设置标签页外层容器样式 */
        .tab-container {
            width: 100%;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        /* 设置标签页选项卡的样式 */
        .tab {
            float: left;
            padding: 8px 16px;
            background-color: #ccc;
            cursor: pointer;
        }

        /* 设置选中的标签页样式 */
        .active {
            background-color: #aaa;
        }

        /* 设置标签页内容的样式 */
        .tab-content {
            display: none;
            padding: 16px;
            background-color: #fff;
        }
    </style>
    </head>
    <body>
        <div class="tab-container">
            <!-- 标签页选项卡 -->
            <div class="tab active" onclick="openTab(event,'tab1')">标签页1</div>
            <div class="tab" onclick="openTab(event,'tab2')">标签页2</div>
            <div class="tab" onclick="openTab(event,'tab3')">标签页3</div>

            <!-- 标签页内容 -->
            <div id="tab1" class="tab-content" style="display:block;">
                <h3>标签页1内容</h3>
                <p>这是标签页1的内容。</p>
            </div>
            <div id="tab2" class="tab-content">
                <h3>标签页2内容</h3>
                <p>这是标签页2的内容。</p>
            </div>
            <div id="tab3" class="tab-content">
                <h3>标签页3内容</h3>
                <p>这是标签页3的内容。</p>
            </div>
        </div>

        <script>
        function openTab(event, tabName) {
            // 获取所有标签页内容元素
            var tabContent = document.getElementsByClassName("tab-content");

            // 隐藏所有标签页内容
            for (var i = 0; i < tabContent.length; i++) {
                tabContent[i].style.display = "none";
            }

            // 移除所有标签页选项卡的 active 类
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].className = tabs[i].className.replace(" active", "");
            }

            // 显示当前选中标签页内容
            document.getElementById(tabName).style.display = "block";

            // 添加 active 类到当前选中标签页选项卡
            event.currentTarget.className += " active";
        }
    </script>
    </body>
</html>

 二、Tab标签，跨页面效果

效果

 代码

首页

<!DOCTYPE html>
<html>
  <head>
    <style>
    .tab {
      display: inline-block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="tabs"></div>
    <div id="content"></div>

    <script>
    // 示例超链接列表数据
    var links = [
      { title: '页面一', url: 'page1.html' },
      { title: '页面二', url: 'page2.html' },
      { title: '页面三', url: 'page3.html' }
    ];
    
    var tabsContainer = document.getElementById('tabs');
    var contentContainer = document.getElementById('content');
    
    // 创建标签页和加载内容函数
    function createTabAndLoadContent(title, url) {
      var tab = document.createElement('div');
      tab.innerText = title;
      tab.className = 'tab';
      
      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url);
        setActiveTab(tab);
      });
      
      tabsContainer.appendChild(tab);
    }
    
    // 加载内容到右侧窗口
    function loadContent(url) {
      contentContainer.innerHTML = '加载中...';
      
      // 模拟异步加载页面内容
      setTimeout(function() {
        // 使用iframe展示页面内容
        contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
      }, 500);
    }
    
    // 设置活动标签页样式
    function setActiveTab(tab) {
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      tabs.forEach(function(t) {
        t.classList.remove('active');
      });
      
      tab.classList.add('active');
    }
    
    // 初始化超链接列表和标签页
    links.forEach(function(link) {
      createTabAndLoadContent(link.title, link.url);
    });
  </script>
  </body>
</html>

 page1.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面1</title>
    </head>
    <body>
        页面1
    </body>
</html>

 三、 Tab标签实现页面顶部标签栏

效果

 代码

<!DOCTYPE html>
<html>
  <head>
    <style>
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    /* 顶部标签栏 */
    #tabsContainer {
      display: flex;
      align-items: center;
    }
    
    .tab {
      display: flex;
      align-items: center;
      /* padding: 5px 15px 5px 15px; */
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
      
    }
    
    /* 标签标题 */
    .tab .title {
      /* margin-right: 5px; */
      /* width:10px; */
      /* border:1px solid black; */
      padding:5px 15px 5px 15px;
      /* width:90% */
    }
    
    /* 标签关闭按钮 */
    .tab .close-btn {
      /* width:10%; */
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding:5px 5px 5px 0;
      /* border:1px solid black; */
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    /* 右侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="links">
      <!-- 在这里添加你的超链接 -->
      <a href="#" onclick="loadContent('page1.html', '超链接1'); return false;"
        class="link">超链接1</a>
      <a href="#" onclick="loadContent('page2.html', '超链接2'); return false;"
        class="link">超链接2</a>
      <a href="#" onclick="loadContent('page3.html', '超链接3'); return false;"
        class="link">超链接3</a>
    </div>
    <div id="tabsContainer"></div>
    <div id="content"></div>

    <script>
    var tabsContainer = document.getElementById('tabsContainer');
    var contentContainer = document.getElementById('content');
    var activeTab = null;
    
    // 加载内容到右侧窗口
    function loadContent(url, tabName) {
      contentContainer.innerHTML = '加载中...';
      
      // 模拟异步加载页面内容
      setTimeout(function() {
        // 使用 iframe 展示页面内容
        contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
        
        // 创建标签并将其激活
        createTabAndSetActive(url, tabName);
      }, 500);
    }
    
    // 创建标签并将其激活
    function createTabAndSetActive(url, tabName) {
      // 如果标签已存在，则激活该标签
      var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (tab) {
        setActiveTab(tab);
        return;
      }
      
      // 创建新的标签
      tab = document.createElement('div');
      tab.className = 'tab';
      tab.setAttribute('data-url', url);
      
      var title = document.createElement('span');
      title.className = 'title';
      title.innerText = tabName;
      tab.appendChild(title);
      
      var closeBtn = document.createElement('span');
      closeBtn.innerText = 'X';
      closeBtn.className = 'close-btn';
      closeBtn.addEventListener('click', function(event) {
        event.stopPropagation();
        closeTab(tab);
      });
      tab.appendChild(closeBtn);
      
      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url, tabName);
        setActiveTab(tab);
      });
      
      tabsContainer.appendChild(tab);
      setActiveTab(tab);
    }
    
    // 设置活动标签页样式
    function setActiveTab(tab) {
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      tabs.forEach(function(t) {
        t.classList.remove('active');
      });
      
      tab.classList.add('active');
      activeTab = tab;
    }
    
    // 关闭标签页
    function closeTab(tab) {
      if (tab === activeTab) {
        contentContainer.innerHTML = '';
        activeTab = null;
      }
      
      tab.parentNode.removeChild(tab);
    }
    </script>
  </body>
</html>

四、更新三、Tab标签实现页面顶部标签栏（超过数量自动删除首项）

效果

解决切换页面时，页面中的内容会进行刷新的问题(实现切换页面，数据不会进行更新的问题)

增加关闭当前页，页面会自动锁定到打开标签页的最后一个页面

增加规定打开标签栏的总数，超过总数，关闭最早打开的页面 

代码

<!DOCTYPE html>
<html>
  <head>
    <style>
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    
    /* 顶部标签栏 */
    #tabsContainer {
      display: flex;
      align-items: center;
    }
    
    .tab {
      display: flex;
      align-items: center;
      /* padding: 5px 15px 5px 15px; */
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
      
    }
    
    /* 标签标题 */
    .tab .title {
      padding:5px 15px 5px 15px;
    }
    
    /* 标签关闭按钮 */
    .tab .close-btn {
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding:5px 5px 5px 0;
      /* border:1px solid black; */
    }
    
    .tab.active {
      background-color: #ccc;
    }
    
    /* 右侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      height: 400px;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <div id="links">
      <!-- 在这里添加你的超链接 -->
      <a href="#" onclick="loadContent('page1.html', '超链接1'); return false;"
        class="link">超链接1</a>
      <a href="#" onclick="loadContent('page2.html', '超链接2'); return false;"
        class="link">超链接2</a>
      <a href="#" onclick="loadContent('page3.html', '超链接3'); return false;"
        class="link">超链接3</a>
      <a href="#" onclick="loadContent('page4.html', '超链接4'); return false;"
        class="link">超链接4</a>
      <a href="#" onclick="loadContent('page5.html', '超链接5'); return false;"
        class="link">超链接5</a>
      <a href="#" onclick="loadContent('page6.html', '超链接6'); return false;"
        class="link">超链接6</a>
    </div>
    <div id="tabsContainer"></div>
    <div id="content"></div>
    <script>
    var tabsContainer = document.getElementById('tabsContainer');
    var contentContainer = document.getElementById('content');
    var activeTab = null;
    
    // 加载内容到右侧窗口
  function loadContent(url, tabName) {
    // 隐藏当前页面内容
    if (activeTab) {
        activeTab.classList.remove('active');
        var activeUrl = activeTab.getAttribute('data-url');
        var activeContent = document.getElementById(activeUrl);
        activeContent.style.display = 'none';
    }
    // 显示新页面内容
    var content = document.getElementById(url);
    if (content) {
        content.style.display = 'block';
    } else {
        content = document.createElement('div');
        content.id = url;
        content.style.display = 'block';
        contentContainer.appendChild(content);

        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.frameborder = '0';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        content.appendChild(iframe);
    }

    createTabAndSetActive(url, tabName);
  }
    
   function createTabAndSetActive(url, tabName) {
      // 如果标签已存在，则激活该标签
      var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (tab) {
        setActiveTab(tab);
        return;
      }

     // 判断当前已打开的标签数量
    var existingTabs = tabsContainer.getElementsByClassName('tab');
    if (existingTabs.length >= 5) {
        // 关闭最早打开的标签页
        var firstTab = existingTabs[0];
        closeTab(firstTab);
    }

      // 创建新的标签
      tab = document.createElement('div');
      tab.className = 'tab';
      tab.setAttribute('data-url', url);

      var title = document.createElement('span');
      title.className = 'title';
      title.innerText = tabName;
      tab.appendChild(title);

      var closeBtn = document.createElement('span');
      closeBtn.innerText = 'X';
      closeBtn.className = 'close-btn';
      closeBtn.addEventListener('click', function(event) {
        event.stopPropagation();
        closeTab(tab);
      });
      tab.appendChild(closeBtn);

      // 点击标签页切换内容
      tab.addEventListener('click', function() {
        loadContent(url, tabName);
        setActiveTab(tab);
      });

      tabsContainer.appendChild(tab);
      setActiveTab(tab);
    }
    
   // 设置活动标签页样式
  function setActiveTab(tab) {
    var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
    tabs.forEach(function(t) {
        t.classList.remove('active');
    });

    tab.classList.add('active');
    activeTab = tab;

    // 显示当前标签页对应的内容
    var url = tab.getAttribute('data-url');
    var content = document.getElementById(url);
    if (content) {
        content.style.display = 'block';
    }
  }
    
    // 关闭标签页
    // function closeTab(tab) {
    //   if (tab === activeTab) {
    //     contentContainer.innerHTML = '';
    //     activeTab = null;
    //   }
      
    //   tab.parentNode.removeChild(tab);
    // }
    // 关闭标签页
  function closeTab(tab) {
    var isActiveTab = (tab === activeTab);
    var nextActiveTab = tab.previousElementSibling || tab.nextElementSibling;

    tab.parentNode.removeChild(tab);

    // 如果关闭的是活动标签页且还有其他标签页存在，则将页面锁定到下一个标签页
    if (isActiveTab && nextActiveTab) {
      setActiveTab(nextActiveTab);
      loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
    }

    // 如果关闭的是活动标签页且没有其他标签页存在，则清空内容和活动标签页
    if (isActiveTab && !nextActiveTab) {
      contentContainer.innerHTML = '';
      activeTab = null;
    }

    // 隐藏当前页面内容
    if (isActiveTab) {
      var activeUrl = tab.getAttribute('data-url');
      var activeContent = document.getElementById(activeUrl);
      activeContent.style.display = 'none';
    }
  }
    </script>
  </body>
</html>

五、更新三、Tab标签实现页面顶部标签栏（超过数量，进行提示，但需要自己删除）

链接

前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）_雯0609~的博客-CSDN博客前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）https://blog.csdn.net/weixin_46001736/article/details/132559742?spm=1001.2014.3001.5501

效果

超过页面限制总数，进行提示，不对超出的页面进行展示

增加标签导航栏的横向滚动（超出部分进行隐藏）

增加全部删除标签页（悬停在标签导航栏最右侧出现删除按钮）

​

代码

<!DOCTYPE html>
<html>

  <head>
    <style>
    /* 左侧超链接列表 */
    .link {
      display: block;
      padding: 8px;
      background-color: #f2f2f2;
      cursor: pointer;
    }

    /* 顶部标签栏 */
    #tabsContainer {
      width:98%;
      display: flex;
      align-items: center;
      overflow-x: auto; /* 添加横向滚动 */
      white-space: nowrap; /* 防止标签换行 */
    }
    #tabsContainer::-webkit-scrollbar {
      display: none; /* 隐藏Webkit浏览器的滚动条 */
    }
    /* 关闭按钮的宽度 */
    .line2{
      width:2%;
    }
    #all_close{
      cursor: pointer;
      display: none;
    }
    .tab_position:hover #all_close {
      display: block;
    }
    .tab_position {
			display: flex;
			align-items: center;/*垂直居中*/
		}
    .tab {
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      border-radius: 3px;
    }

    /* 标签标题 */
    .tab .title {
      padding: 5px 15px 5px 15px;
      user-select: none; /* 禁止文字复制 */
    }

    /* 标签关闭按钮 */
    .tab .close-btn {
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      padding: 5px 5px 5px 0;
      user-select: none; /* 禁止文字复制 */
    }

    .tab.active {
      background-color: #ccc;
    }

    /* 左侧内容 */
    #links {
      float: left;
      width: 200px;
      padding: 10px;
    }

    #tabs {
      padding: 10px;
    }
    /* 右侧 */
    #content {
      border: 1px solid #ccc;
      padding: 10px;
      overflow: auto;
    }
  </style>
  </head>

  <body>
    <div id="links">
      <!-- 在这里添加你的超链接 -->
      <a href="#" onclick="loadContent('page1.html', '这是我的超链接标题1，我要测试滚动条');
        return
        false;"
        class="link">超链接1</a>
      <a href="#" onclick="loadContent('page2.html', '这是我的超链接标题2，我要测试滚动条');
        return
        false;"
        class="link">超链接2</a>
      <a href="#" onclick="loadContent('page3.html', '这是我的超链接标题3，我要测试滚动条');
        return
        false;"
        class="link">超链接3</a>
      <a href="#" onclick="loadContent('page4.html', '这是我的超链接标题4，我要测试滚动条');
        return
        false;"
        class="link">超链接4</a>
      <a href="#" onclick="loadContent('page5.html', '这是我的超链接标题5，我要测试滚动条');
        return
        false;"
        class="link">超链接5</a>
      <a href="#" onclick="loadContent('page6.html', '这是我的超链接标题6，我要测试滚动条');
        return
        false;"
        class="link">超链接6</a>
      <a href="#" onclick="loadContent('page7.html', '这是我的超链接标题7，我要测试滚动条');
        return
        false;"
        class="link">超链接7</a>
      <a href="#" onclick="loadContent('page8.html', '这是我的超链接标题8，我要测试滚动条');
        return
        false;"
        class="link">超链接8</a>
      <a href="#" onclick="loadContent('page9.html', '这是我的超链接标题9，我要测试滚动条');
        return
        false;"
        class="link">超链接9</a>
    </div>
    <div class="tab_position">
      <div id="tabsContainer"></div>
      <div id="line2">
        <div id="all_close" onclick="all_close()">X</div>
      </div>
    </div>
    <div id="content"></div>
    <script>
    var tabsContainer = document.getElementById('tabsContainer');
    var contentContainer = document.getElementById('content');
    var activeTab = null;

    // 加载内容到右侧窗口
    function loadContent(url, tabName) {
      var existingTab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (existingTab) {
        setActiveTab(existingTab);
        return;
      }

      // 检查标签页数量是否已达上限
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      if (tabs.length >= 7) {
        alert('已达到标签页数量上限');
        return;
      }

      // 隐藏当前页面内容
      if (activeTab) {
        activeTab.classList.remove('active');
        var activeUrl = activeTab.getAttribute('data-url');
        var activeContent = document.getElementById(activeUrl);
        activeContent.style.display = 'none';
      }

      // 显示新页面内容
      var content = document.getElementById(url);
      if (content) {
        content.style.display = 'block';
      } else {
        content = document.createElement('div');
        content.id = url;
        content.style.display = 'block';
        contentContainer.appendChild(content);

        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.frameborder = '0';
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        content.appendChild(iframe);
      }

      createTabAndSetActive(url, tabName);
    }


    function createTabAndSetActive(url, tabName) {
      // 如果标签已存在，则激活该标签
      var tab = tabsContainer.querySelector('[data-url="' + url + '"]');
      if (tab) {
        setActiveTab(tab);
        return;
      }

      // 创建新的标签
      tab = document.createElement('div');
      tab.className = 'tab';
      tab.setAttribute('data-url', url);

      var title = document.createElement('span');
      title.className = 'title';
      title.innerText = tabName;
      tab.appendChild(title);

      var closeBtn = document.createElement('span');
      closeBtn.innerText = 'X';
      closeBtn.className = 'close-btn';
      closeBtn.addEventListener('click', function (event) {
        event.stopPropagation();
        closeTab(tab);
      });
      tab.appendChild(closeBtn);

      // 点击标签页切换内容
      tab.addEventListener('click', function () {
        loadContent(url, tabName);
        setActiveTab(tab);
      });

      tabsContainer.appendChild(tab);
      setActiveTab(tab);
    }

    // 设置活动标签页样式
    function setActiveTab(tab) {
      var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
      tabs.forEach(function (t) {
        t.classList.remove('active');

        // 隐藏标签页对应的内容
        var tabUrl = t.getAttribute('data-url');
        var tabContent = document.getElementById(tabUrl);
        if (tabContent) {
          tabContent.style.display = 'none';
        }
      });

      tab.classList.add('active');
      activeTab = tab;

      // 显示当前标签页对应的内容
      var url = tab.getAttribute('data-url');
      var content = document.getElementById(url);
      if (content) {
        content.style.display = 'block';
      }
    }

    // 关闭标签页
    function closeTab(tab) {
      var isActiveTab = (tab === activeTab);
      var nextActiveTab = tab.previousElementSibling || tab.nextElementSibling;

      tab.parentNode.removeChild(tab);

      // 如果关闭的是活动标签页且还有其他标签页存在，则将页面锁定到下一个标签页
      if (isActiveTab && nextActiveTab) {
        setActiveTab(nextActiveTab);
        loadContent(nextActiveTab.getAttribute('data-url'), nextActiveTab.querySelector('.title').innerText);
      }

      // 如果关闭的是活动标签页且没有其他标签页存在，则清空内容和活动标签页
      if (isActiveTab && !nextActiveTab) {
        contentContainer.innerHTML = '';
        activeTab = null;
      }
      // 隐藏当前页面内容
      if (isActiveTab) {
        var activeUrl = tab.getAttribute('data-url');
        var activeContent = document.getElementById(activeUrl);
        activeContent.style.display = 'none';
      }
    }

    // 关闭全部未激活标签页
    function all_close() {     
      var confirmation = confirm('是否关闭全部标签页？'); // 显示确认和取消提示框
      if (confirmation) {
        var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));
        tabs.forEach(function (tab) {
          if (!tab.classList.contains('active')) {
            closeTab(tab);
          }
        });
        // 清空内容、活动标签页和标签导航栏
        contentContainer.innerHTML = '';
        activeTab = null;
        tabsContainer.innerHTML = '';
      } else {
        console.log('取消')
      }       
    }
    

    var isMouseDown = false;
    var startX = 0;
    var scrollLeft = 0;

    tabsContainer.addEventListener('mousedown', function (e) {
      isMouseDown = true;
      startX = e.pageX - tabsContainer.offsetLeft;
      scrollLeft = tabsContainer.scrollLeft;
    });

    tabsContainer.addEventListener('mouseleave', function () {
      isMouseDown = false;
    });

    tabsContainer.addEventListener('mouseup', function () {
      isMouseDown = false;
    });

    tabsContainer.addEventListener('mousemove', function (e) {
      if (!isMouseDown) return;
      e.preventDefault();
      var x = e.pageX - tabsContainer.offsetLeft;
      var walk = (x - startX) * 2; // 调整滚动速度
      tabsContainer.scrollLeft = scrollLeft - walk;
    });
  </script>
  </body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/958934.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Synchronized 锁升级的原理

Synchronized 锁升级的原理

问题解析 Synchronized 在 jdk1.6 版本之前&#xff0c;是通过重量级锁的方式来实现线程之间锁的竞争。 之所以称它为重量级锁&#xff0c;是因为它的底层依赖操作系统的 Mutex Lock 来实现互斥功能。 如下图所示&#xff0c; Mutex 是系统方法&#xff0c;由于权限隔…
阅读更多...
【数据分析】使用Python对数据的操作转换

【数据分析】使用Python对数据的操作转换

使用Python对数据的操作转换 目录 1、列表加值转字典2、字典键新增值数据3、转换新的字典格式4、两组数据比较筛选5、将两段独立代码合并1、列表加值转字典 在Python中&#xff0c;将列表的值转换为字典的键可以使用以下代码&#xff1a; #!/usr/bin/env python # -*- cod…
阅读更多...
详细教程-Chatbot具体需要如何搭建

详细教程-Chatbot具体需要如何搭建

最近建设企业专属的帮助中心或者博客是很流行的趋势&#xff0c;尤其是在AI功能的介入下&#xff0c;可以帮到企业和用户进行更自助的操作。但是很多企业会遇到以下问题&#xff1a;我们已经有了一个原有的知识库了&#xff0c;再建设一个新的需要把数据迁移。这个操作很麻烦和…
阅读更多...
科技资讯|微软获得AI双肩包专利，Find My防丢背包大火

科技资讯|微软获得AI双肩包专利，Find My防丢背包大火

根据美国商标和专利局&#xff08;USPTO&#xff09;近日公示的清单&#xff0c;微软于今年 5 月提交了一项智能双肩包专利&#xff0c;其亮点在于整合了 AI 技术&#xff0c;可以识别佩戴者周围环境、自动响应用户聊天请求、访问基于云端的信息、以及和其它设备交互。 在此附…
阅读更多...
单片机电子元器件-按键

单片机电子元器件-按键

电子元器件 按键上有 四个引脚 1 2 、 3 4 按下之后 导通 1 3 、 2 4 初始导通 通常按键开关为机械弹性开关&#xff0c;开关在闭合不会马上稳定的接通&#xff0c;会有一连串的抖动 抖动时间的长短有机械特性来决定的&#xff0c;一般为5ms 到10 ms 。 消抖的分类 硬件消…
阅读更多...
LSM树详解

LSM树详解

LSM树(Log-Structured-Merge-Tree)的名字往往会给初识者一个错误的印象&#xff0c;事实上&#xff0c;LSM树并不像B树、红黑树一样是一颗严格的树状数据结构&#xff0c;它其实是一种存储结构&#xff0c;目前HBase,LevelDB,RocksDB这些NoSQL存储都是采用的LSM树。 LSM树的核…
阅读更多...
开源PHP 代挂机源码，可对接QQ、网易云、哔哩哔哩、QQ空间、等级加速等等

开源PHP 代挂机源码，可对接QQ、网易云、哔哩哔哩、QQ空间、等级加速等等

本程序运行环境PHP5.6 95dg/config.php修改系统数据库 进入数据库绑定 你搭建的域名即可 部署完成 进入数据库 找到data 输入绑定授权域名即可进行授权打开此网站 网站是无对接接口 需要您自行找对接接口即可 本源码有点乱 有实力的铁铁 可以修改一下哦&#xff01;
阅读更多...
linux kvm网桥br简单理解和持久化配置

linux kvm网桥br简单理解和持久化配置

linux网桥简单理解和持久化配置 文章目录 前言一、Linux 网桥是什么&#xff1f;二、网桥主要作用三、网桥配置命令及安装(CentOS系统) 1 网桥配置命令2.持久化网桥配置 前言 linux bridge是网络虚拟化中非常重要的一种设备&#xff0c;今天就来学习下linux bridge的相关知…
阅读更多...
360牛盾点选

360牛盾点选

网址&#xff1a;https://info.so.com/cache_remove.html 360旗下的产品&#xff0c;协议并不难。 感兴趣的话大家可以去看看&#xff0c;一个AES&#xff0c;坐标需要缩放处理。 鱼导就是牛&#xff0c;还没失败过。 完事儿了哦&#xff0c;大表哥们。以上需要算法&#xff0…
阅读更多...
Qt5界面Qt Designer上添加资源图片后，ModuleNotFoundError: No module named ‘rcc_rc‘ 的终极解决方案

Qt5界面Qt Designer上添加资源图片后，ModuleNotFoundError: No module named ‘rcc_rc‘ 的终极解决方案

在网上找了很久都没弄明白&#xff0c;最后还是自己思考解决了。 起因&#xff1a; 用 Qt Designer 添加资源文件作为背景图&#xff0c;编译 \resource\static\qrc> pyuic5 -o .\xx.py .\xx.ui发现在 xx.py 文件末尾中多了一个语句&#xff1a; import rcc_rc然后运行就…
阅读更多...
【前端demo】简易计算器 原生实现

【前端demo】简易计算器 原生实现

文章目录 效果代码htmlcssjs 其他demo&#xff1a;https://blog.csdn.net/karshey/article/details/132585901 效果 效果预览&#xff1a;https://codepen.io/karshey/pen/RwERjGz 参考&#xff1a; js实现仿华为手机计算器&#xff0c;兼容电脑和手机屏幕_dengluandai1740的…
阅读更多...
2023年9月15厦门双人

2023年9月15厦门双人

预算3000两天夜厦门之路 一、9月15早上六点起床 1. 20分钟收拾东西出门 06:20 2. 出门路过早餐摊买早饭吃 06:30 3. 地铁到虹桥 8:20到 4. 火车到厦门北 5:00到&#xff08;直接去玩&#xff09; 二、住 暂定 中山路步行街附近 三、吃玩 1. 第一天晚上 直接去 白城沙滩「…
阅读更多...
Debian12搭建Nextcloud最新版并frp到二级域名

Debian12搭建Nextcloud最新版并frp到二级域名

起因&#xff1a;因为台风的原因&#xff0c;要居家办公&#xff0c;但正值公司业务最要紧的时刻&#xff0c;所以需要搭建远程共享&#xff0c;结果发现基于原有的经验&#xff0c;已经难以适应版本更新带来的问题&#xff0c;所以就解决方法&#xff0c;进行了一次重新总结&a…
阅读更多...
ssm+vue乐购游戏商城系统源码和论文

ssm+vue乐购游戏商城系统源码和论文

ssmvue乐购游戏商城系统源码和论文115 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着社会的发展&#xff0c;游戏品种越来越多&#xff0c;计算机的优势和普及使得乐购游戏商城系统的开发成为必需…
阅读更多...
气候变化下的DNDC模拟

气候变化下的DNDC模拟

DNDC&#xff08;Denitrification-Decomposition&#xff0c;反硝化-分解模型&#xff09;是目前国际上最为成功的模拟生物地球化学循环的模型之一&#xff0c;自开发以来&#xff0c;经过不断完善和改进&#xff0c;从模拟简单的农田生态系统发展成为可以模拟几乎所有陆地生态…
阅读更多...
[C++网络协议] I/O复用

[C++网络协议] I/O复用

具有代表性的并发服务器端实现模型和方法&#xff1a; 多进程服务器&#xff1a;通过创建多个进程提供服务。 多路复用服务器&#xff1a;通过捆绑并统一管理I/O对象提供服务。✔ 多线程服务器&#xff1a;通过生成与客户端等量的线程提供服务。 目录 1. I/O复用 2. select函…
阅读更多...
数据恢复工具推荐，记好这3款！

数据恢复工具推荐，记好这3款！

“我真的总会因为数据丢失而烦恼。有些文件都不知道什么时候删除的&#xff0c;想找的时候就找不到了。各位朋友有什么好的数据恢复工具可以推荐吗&#xff1f;真的很需要&#xff01;” 无论保存在电脑、u盘、还是手机里的数据&#xff0c;都有可能会被误删或由于各种原因而丢…
阅读更多...
Vue框架--Vue中的数据绑定

Vue框架--Vue中的数据绑定

Vue中有两种数据绑定的方式 1.单向数据绑定(v-band):数据只能够从data流向页面 2.双向数据绑定(v-model):数据不仅仅能够从data流向页面&#xff0c;也可以从页面流向data。 备注: 1.双向绑定一般都应用在表单类元素上。(如:input、select等有value属性值的标签上) 2.…
阅读更多...
【开发】视频云存储/安防监控视频智能分析网关V3：明烟/明火检测详解

【开发】视频云存储/安防监控视频智能分析网关V3：明烟/明火检测详解

智能分析网关系列是基于边缘AI计算技术&#xff0c;可对前端摄像头采集的视频流进行实时检测分析&#xff0c;能对监控画面中的人、车、物进行识别。我们的AI边缘计算网关硬件——智能分析网关目前有5个版本&#xff1a;V1、V2、V3、V4、V5&#xff0c;每个版本都能实现对监控视…
阅读更多...
iOS开发Swift-6-深色模式,类与对象,MVC模式,弹出框,闭包-趣味问答App

iOS开发Swift-6-深色模式,类与对象,MVC模式,弹出框,闭包-趣味问答App

1.创建趣味问答App项目 2.创建一个问题文本&#xff0c;水平居中约束。 创建蓝、红两个按钮&#xff0c;放入Stack View中&#xff0c;给StackView水平居中约束&#xff0c;下边约束&#xff0c;设置两按钮间距为20. 设置进度条view与safe View关系为equal width。设置他们的比…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023