Question

我正在尝试制作＆＃34; javascript项目＆＃34;和＆＃34; CGI项目＆＃34;单击＆＃34;项目＆＃34;滑动切换。按钮。但是，我不太明白为什么当我点击时只有CGI项目按钮切换，并且javascript项目按钮保持不变？

我正在尝试使用Jquery来实现幻灯片切换效果，但似乎只有CGI项目做出反应，但两个按钮都具有相同的HTML代码和CSS。是什么造成了差异？

＆＃13;

<!Doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
        *{box-sizing: border-box}
        body {font-family: "Lato", sans-serif;}
        
        /* Style the tab */
        div.tab {
            float: left;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            width: 250px;
            height: 500px;
        }

        /* Style the buttons inside the tab */
        div.tab button {
            font-size: 18px;
            display: block;
            background-color: inherit;
            color: black;
            padding: 22px 16px;
            width: 100%;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            transition: 0.3s;
        }
        
        /* Change background color of buttons on hover */
        div.tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current "tab button" class */
        div.tab button.active {
            background-color: #ccc;
        }
        
        .projectList {
            display: none;
        }
        
        /* Style the tab content */
        .tabContent {
            float: left;
            padding: 0px 12px;
            width: 70%;       
            height: 500px;
        }
        
        li {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <nav>
        <div class="tab">
            <button class="tabLinks" onclick="openInfo(event, 'About Myself')" id="defaultOpen">About Myself</button>
            <button class="tabLinks" id="projects">Projects
                <li id="java"><button class="tabLinks" onclick="openInfo(event, 'javascript project')">Javascript project</button></li>
                <li id="cgi"><button class="tabLinks" onclick="openInfo(event, 'cgi project')">CGI project</button></li>
            </button>
            <button class="tabLinks" onclick="openInfo(event, 'Contact')">Contact</button>
        </div>
     
        <div id="About Myself", class="tabContent">
            <h3>About Myself</h3>
            <p>This is my information section</p>
        </div>
    
        <div id="Contact", class="tabContent">
            <h3>Contact</h3>
            <p>This it contact section</p>
        </div>
        
        <div id="javascript project", class="tabContent">
            <h3>Javascript Project</h3>
            <p>This is javascript project section</p>
        </div>
        
        <div id="cgi project", class="tabContent">
            <h3>CGI project</h3>
            <p>This is the CGI project section</p>
        </div>
    </nav>
    
    <script>
        function openInfo(evt, diplayInfo) {
            var i, tabcontent, tablinks;
            
            // Get all elements with class="tabContent" and hide them
            tabcontent = document.getElementsByClassName("tabContent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            
            // Get all elements with class="tabLinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tabLinks");
            for(i=0; i<tablinks.length; i++){
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            
            // Show the current tab, and add an "active" class to the link that opened the tab
            document.getElementById(diplayInfo).style.display = "block";
            evt.currentTarget.className += " active";
        }
        
        $(document).ready(function(){
            $("#projects").on("click", function(){
                $("#java").slideToggle(500);
                $("#cgi").slideToggle(500);
            });
        });
        
        document.getElementById("defaultOpen").click();
    </script>
    
</body>
</html>

＆＃13;

Answer 1

如果您只查找代码的修补程序，则可以使用此标记替换项目按钮：

<button class="tabLinks" id="projects">Projects</button>
<div id="projects-list">
    <button class="tabLinks" onclick="openInfo(event, 'javascript project')">Javascript project</button>
    <button class="tabLinks" onclick="openInfo(event, 'cgi project')">CGI project</button>
</div>

然后将jQuery切换幻灯片更改为：

$("#projects").on("click", function(){
    $("#projects-list").slideToggle(500); 
});

但我真的建议你看看下面的解决方案，它也可能对你有所帮助。

据我所知，现在这样的菜单将由HTML列表元素生成，对于你的情况可以是这样的：

<nav  class="side-menu">
  <ul>
    <li><a href="#about-me">About me</a></li>
    <li><a href="#projects">Projects</a>
      <ul class="projects-list">
        <li><a href="#javascript-projects">Javascript</a></li>
        <li><a href="#cgi-projects">CGI</a></li>
      </ul>
    </li>
    <li><a href="#contact-me">Contact me</a></li> 
  </ul>
</nav>

然后jQuery（JS）部分可以是这样的：

$(document).ready(function(){ 
    var projectsList = $('ul.projects-list');
    $('nav').on('click','a',function(){         // binds event on each link in nav container (uses event delegate)
       var contentId = $(this).attr('href');    // gets content id based on link href attribute
       if(contentId==='#projects'){             // if clicked item is projects  
          projectsList.slideToggle(300);        // then toggle projects list
       } else {                                 // else  
          $('.tabContent').fadeOut(0);          // fadeout all contents
          $(contentId).fadeIn(300);             // and fade in content of clicked link
       }
   });
});

对于CSS并看到它的实际效果我建议您在此处查看：https://codepen.io/FaridNaderi/pen/zzXPaK

希望它有所帮助。

HTML制作菜单展开/折叠

2 个答案: