javascript - 侧边栏在博主 soho 主题中不起作用

问题描述

我正在尝试将代码导入博客，但在博客中，它无法正常工作。整个事情是一个侧边栏菜单。当我将鼠标通过它时。它应该滑动以查看内容的名称，如果我单击它，它应该会更改正文的颜色并以不同的颜色显示正文内容。如果我在我的计算机上运行它而不将它添加到博主，它就可以工作。当我将它添加到博客时，它不会改变正文颜色或内容，它只是在主要内容之后显示为一条细带，并在博主积分下方。我正在使用 Soho 博客主题。我已经删除了默认模板侧边栏。

这是代码

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1">


      <!doctype html>


      <style>
      #mySidenav a {
        position: fixed;
        left: -230px;
        transition: 0.3s;
        padding: 15px;
        width: 270px;
        text-decoration: none;
        font-size: 20px;
        color: white;
        border-radius: 0 5px 5px 0;
      }

      #mySidenav a:hover {
        left: 0;
      }

      #about {
        top: 100px;
        background-color: #0055A5;
      }

      #blog {
        top: 160px;
        background-color: #5F6BB0;
      }

      #projects {
        top: 220px;
        background-color: #158DA9;
      }

      #contact {
        top: 280px;
        background-color: #8F2054;
      }
      #matematica{
        top:340px;
        background-color:#B1BB36;
      }

      a{
      text-align: right;
      }


      /* Novo estilo*/
      *{box-sizing: inherit}/*border-box*/

      /* Set height of body and the document to 100% */
      body, html,#page {
        height: 100%;
        margin: 0;
        font-family: Arial;
      }

      /* Style tab links */
      .tablink {
        background-color: #555;
        color: white;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        font-size: 17px;
        width: 25%;
      }

      .tablink:hover {
        background-color: #777;
      }

      /* Style the tab content (and add height:100% for full page content) */
      .tabcontent {
        color: white;
        display: none;
        padding: 100px 20px;
        height: 100%;
      }

      #About {background-color: #0055A5;}
      #Blog {background-color: #5F6BB0;}
      #Projects {background-color: #158DA9;}
      #Contact {background-color: #8F2054;}
      #Matematica {background-color:#B1BB36;}
      /*#News {background-color: green;}
      #Contact {background-color: blue;}
      #About {background-color: orange;}*/


      /*FIm DO NOVO ESTILO*/


      </style>




      <div id="mySidenav" class="sidenav">
        <a href="#" id="about" class="tablink" onclick="openPage('About', this, '#0055A5')">Ciência <i class="fas fa-microscope"></i> </a>
        <a href="#" id="blog" class="tablink" onclick="openPage('Blog', this, '#5F6BB0')"> Tecnologia  <i class="fas fa-laptop-code"></i></a>
        <a href="#" id="projects" class="tablink" onclick="openPage('Projects', this, '158DA9')">Engenharia <i class="fas fa-tools"></i></a>
        <a href="#" id="contact" class="tablink" onclick="openPage('Contact', this, '8F2054')">Artes  <i class="fas fa-palette"></i></a>
        <a href="#" id="matematica" class="tablink" onclick="openPage('Matematica', this, 'B1BB36')" >Matematica <i class="fas fa-square-root-alt"></i></a>
      </div>

      <!-- <button class="tablink" onclick="openPage('About', this, '#0055A5')">Home</button> -->
      <div id="About" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="Blog" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="Projects" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="Contact" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="Matematica" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="About" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="About" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>


      <script>
      function openPage(pageName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(pageName).style.display = "block";
        elmnt.style.backgroundColor = color;
      }

      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();
      </script>

      </!doctype>

标签： javascriptcssbloggersidebar

javascript - 侧边栏在博主 soho 主题中不起作用

问题描述

解决方案

推荐阅读