all

src/contents/experiments copy.tsx

+import { Nav } from 'react-bootstrap';
+import { Link,Element } from 'react-scroll';
+import React,{useEffect,useState} from 'react';
+
+// sidenavbar begin
+interface SideNavbarProps {
+  activeLink: string;
+}
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+  return (
+    <div className="side-navbar">
+      <Nav className="flex-column">
+        <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
+        <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
+
+
+        {/* 添加更多导航链接 */}
+      </Nav>
+    </div>
+  );
+};
+// sidenavbar end 
+
+export function Experiments() {
+  // sidenavbar begin
+  const [activeLink, setActiveLink] = useState<string>('');
+    useEffect(() => {
+      const handleScroll = () => {
+        const sections = document.querySelectorAll('.element');
+        let currentSection = '';
+          sections.forEach(section => {
+            const sectionTop = section.getBoundingClientRect().top;
+            if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+              currentSection = section.id;
+            }
+          });
+        setActiveLink(currentSection);
+      };
+      window.addEventListener('scroll', handleScroll);
+      return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+    // sidenavbar end
+
+
+
+  return (
+    <>
+      <div className="custom-header-experiments">
+            <h1 className="centered-title">
+                          <img 
+                            src="https://static.igem.wiki/teams/5378/header/experiment.png"
+                            alt="safety header"
+                            className="header-img"
+                          />
+                                        <img 
+                            src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+                            alt="safety header"
+                            className="header-bar"
+                          />
+            </h1>
+      </div>
+
+
+      <div className="row  bg-rice_yellow">
+        <div className="col-2">
+          <SideNavbar activeLink={activeLink}          />
+      </div>
+      
+        
+        <div className="col-10">
+          
+              
+              <Element name="section1" className="element rounded-border" id='section1'>
+                 <h2>Section 1</h2>
+                 <p>Content for section 1.</p>
+               </Element>
+          
+               <div className="bd-callout bd-callout-info bg-gray">
+                  <h1>What do we do to ...? See...</h1>
+                </div>
+          
+              
+              {/* <Element name="section2" className="element rounded-border" id='section2'>
+                <h2>Section 2</h2>
+                <p>Content for section 2.</p>
+                <img 
+                src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
+                alt="example"
+                className="responsive-img"
+              />
+              </Element> */}
+          
+
+              <Element name="section3" className="element rounded-border" id='section2'>
+              <h2>Section 2</h2>
+              <p>Content for section 2.</p>
+              <div className="rounded-border">
+              <h4 className="center-text">Section 2</h4>
+              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+              </div>
+              </Element>
+
+
+
+          
+
+        </div>
+        <div className="col-1"></div>
+
+          
+        
+      </div>
+    </>
+  );
+}

src/contents/experiments.tsx

 import { Nav } from 'react-bootstrap';
-import { Link,Element } from 'react-scroll';
-import React,{useEffect,useState} from 'react';
+import { Link, Element } from 'react-scroll';
+import React, { useEffect, useState } from 'react';
 
 // sidenavbar begin
 interface SideNavbarProps {
   activeLink: string;
+  onLinkClick: (section: string) => void;
 }
-const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink, onLinkClick }) => {
   return (
     <div className="side-navbar">
       <Nav className="flex-column">
-        <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
-        <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
-        <Nav.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link>
-        <Nav.Link as={Link} to="section4" smooth={true} duration={500} className={activeLink === 'section4' ? 'active' : 'notActive'}>Section 4</Nav.Link>
-        <Nav.Link as={Link} to="section5" smooth={true} duration={500} className={activeLink === 'section5' ? 'active' : 'notActive'}>Section 5</Nav.Link>
-        <Nav.Link as={Link} to="section6" smooth={true} duration={500} className={activeLink === 'section6' ? 'active' : 'notActive'}>Section 6</Nav.Link>
-        <Nav.Link as={Link} to="section7" smooth={true} duration={500} className={activeLink === 'section7' ? 'active' : 'notActive'}>Section 7</Nav.Link>
-        <Nav.Link as={Link} to="section8" smooth={true} duration={500} className={activeLink === 'section8' ? 'active' : 'notActive'}>Section 8</Nav.Link>
-        <Nav.Link as={Link} to="section9" smooth={true} duration={500} className={activeLink === 'section9' ? 'active' : 'notActive'}>Section 9</Nav.Link>
-        <Nav.Link as={Link} to="section10" smooth={true} duration={500} className={activeLink === 'section10' ? 'active' : 'notActive'}>Section 10</Nav.Link>
-        <Nav.Link as={Link} to="section11" smooth={true} duration={500} className={activeLink === 'section11' ? 'active' : 'notActive'}>Section 11</Nav.Link>
+        <Nav.Link 
+          as={Link} 
+          to="section1" 
+          smooth={true} 
+          duration={500} 
+          className={activeLink === 'section1' ? 'active' : 'notActive'}
+          onClick={() => onLinkClick('section1')}
+        >
+          Section 1
+        </Nav.Link>
+        <Nav.Link 
+          as={Link} 
+          to="section2" 
+          smooth={true} 
+          duration={500} 
+          className={activeLink === 'section2' ? 'active' : 'notActive'}
+          onClick={() => onLinkClick('section2')}
+        >
+          Section 2
+        </Nav.Link>
         {/* 添加更多导航链接 */}
       </Nav>
     </div>
@@ -30,174 +40,86 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
 
 export function Experiments() {
   // sidenavbar begin
-  const [activeLink, setActiveLink] = useState<string>('');
-    useEffect(() => {
-      const handleScroll = () => {
-        const sections = document.querySelectorAll('.element');
-        let currentSection = '';
-          sections.forEach(section => {
-            const sectionTop = section.getBoundingClientRect().top;
-            if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
-              currentSection = section.id;
-            }
-          });
-        setActiveLink(currentSection);
-      };
-      window.addEventListener('scroll', handleScroll);
-      return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
-    // sidenavbar end
-
-
+  const [activeLink, setActiveLink] = useState<string>('section1');
+  const [visibleSection, setVisibleSection] = useState<string>('section1');
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const sections = document.querySelectorAll('.element');
+      let currentSection = '';
+      sections.forEach(section => {
+        const sectionTop = section.getBoundingClientRect().top;
+        if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+          currentSection = section.id;
+        }
+      });
+      setActiveLink(currentSection);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  // sidenavbar end
+
+  const handleMouseEnter = (section: string) => {
+    setVisibleSection(section);
+  };
+
+  const handleLinkClick = (section: string) => {
+    setVisibleSection(section);
+  };
 
   return (
     <>
       <div className="custom-header-experiments">
-<h1 className="centered-title">
-              <img 
-                src="https://static.igem.wiki/teams/5378/header/experiment.png"
-                alt="safety header"
-                className="header-img"
-              />
-                            <img 
-                src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
-                alt="safety header"
-                className="header-bar"
-              />
-</h1>
-</div>
-      <div className="row  bg-rice_yellow">
+        <h1 className="centered-title">
+          <img 
+            src="https://static.igem.wiki/teams/5378/header/experiment.png"
+            alt="safety header"
+            className="header-img"
+          />
+          <img 
+            src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+            alt="safety header"
+            className="header-bar"
+          />
+        </h1>
+      </div>
+
+      <div className="row bg-rice_yellow">
         <div className="col-2">
-          <SideNavbar activeLink={activeLink}          />
+          <SideNavbar activeLink={activeLink} onLinkClick={handleLinkClick} />
         </div>
         
         <div className="col-10">
+          <Element 
+            name="section1" 
+            className="element rounded-border" 
+            id='section1' 
+            onMouseEnter={() => handleMouseEnter('section1')}
+            style={{ display: visibleSection === 'section1' ? 'block' : 'none' }}
+          >
+            <h2>Section 1</h2>
+            <p>Content for section 1.</p>
+          </Element>
           
-              
-              <Element name="section1" className="element rounded-border" id='section1'>
-                 <h2>Section 1</h2>
-                 <p>Content for section 1.</p>
-                 
-              <iframe 
-              src="https://static.igem.wiki/teams/5378/pdf/example.pdf" 
-              style={{ width: '100%', height: '1000px' }}
-              title="PDF Viewer"
-              ></iframe>
-               </Element>
-          
-               <div className="bd-callout bd-callout-info bg-gray">
-                  <h1>What do we do to ...? See...</h1>
-                </div>
-          
-              
-              <Element name="section2" className="element rounded-border" id='section2'>
-                <h2>Section 2</h2>
-                <p>Content for section 2.</p>
-                <img 
-                src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
-                alt="example"
-                className="responsive-img"
-              />
-              </Element>
-          
-
-              <Element name="section3" className="element rounded-border" id='section3'>
-              <h2>Section 3</h2>
-              <p>Content for section 3.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">Section 3</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section4" className="element rounded-border" id='section4'>
-              <h2>Section 4</h2>
-              <p>Content for section 4.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section5" className="element rounded-border" id='section5'>
-              <h2>Section 5</h2>
-              <p>Content for section 5.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section6" className="element rounded-border" id='section6'>
-              <h2>Section 6</h2>
-              <p>Content for section 6.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section7" className="element rounded-border" id='section7'>
-              <h2>Section 7</h2>
-              <p>Content for section 7.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section8" className="element rounded-border" id='section8'>
-              <h2>Section 8</h2>
-              <p>Content for section 8.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section9" className="element rounded-border" id='section9'>
-              <h2>Section 9</h2>
-              <p>Content for section 9.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section10" className="element rounded-border" id='section10'>
-              <h2>Section 10</h2>
-              <p>Content for section 10.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-
-              <Element name="section11" className="element rounded-border" id='section11'>
-              <h2>Section 11</h2>
-              <p>Content for section 11.</p>
-              <div className="rounded-border">
-              <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              </div>
-              </Element>
-          
-
+          <Element 
+            name="section2" 
+            className="element rounded-border" 
+            id='section2' 
+            onMouseEnter={() => handleMouseEnter('section2')}
+            style={{ display: visibleSection === 'section2' ? 'block' : 'none' }}
+          >
+            <h2>Section 2</h2>
+            <p>Content for section 2.</p>
+            <div className="rounded-border">
+              <h4 className="center-text">Section 2</h4>
+              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+            </div>
+          </Element>
         </div>
         <div className="col-1"></div>
-
-          
-        
       </div>
     </>
   );
-}
+}
\ No newline at end of file