Блог

Код моей веб-страницы в настоящее время выглядит следующим образом:

 function Courses() {
  return (
    <React.Fragment>
      <div class="container pt-3 pb-3 mb-3 mt-3">
          <Row>
            <Col md={3}>
              <h2>Courses</h2>
            </Col>
          </Row>
        <Container>
          <Tab.Container id="example-images" transition={Collapse} defaultActiveKey="#course1">
            <Row>
              <Col md={3}>
                <Nav variant="pills" className="flex-column">
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course1">
                      Sketch
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course2">
                      Charcoal
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course3">
                      Color Pencil
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course4">
                      Acrylic
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course5">
                      Water Color
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course6">
                      Oil Painting
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course7">
                      Color Composition
                    </Nav.Link>
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link as={Link} className="course-link" action href="#course8">
                      Black and White Composition
                    </Nav.Link>
                  </Nav.Item>
                </Nav>
              </Col>
              <Col md={9}>
                <Tab.Content>
                  <Tab.Pane eventKey="#course1">
                    <SketchImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course2">
                    <CharcoalImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course3">
                    <ColorPencilImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course4">
                    <AcrylicImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course5">
                    <WaterColorImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course6">
                    <OilPaintingImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course7">
                    <ColorCompositionImgs />
                  </Tab.Pane>
                  <Tab.Pane eventKey="#course8">
                    <BlackWhiteCompositionImgs />
                  </Tab.Pane>
                </Tab.Content>
              </Col>
            </Row>
          </Tab.Container>
        </Container>
      </div>
    </React.Fragment>
  );
}

export default Courses;

 

Когда навигатор.Будет нажата ссылка, вкладка.Переключатели панели. Это отлично работает на рабочем столе. Но на мобильном, вкладка.Панель продолжает возвращаться к значку Activekey по умолчанию при прокрутке вниз. Это может быть связано с обновлением веб-страницы при выполнении какого-либо действия. Это известная проблема? Есть ли какие-то решения?

Веб-сайт является https://joshuajy03.github.io/artwebsite/#/courses