1. http://chuangzaoshi.com/code 왼쪽과 같은 네비게이션 바를 어떻게 구현하나요?
2. CSS를 사용하여 완전히 구현할 수 있나요? 순수 CSS를 구현하는 방법은 무엇입니까? JS를 어떻게 구현하나요?
감사합니다!
ps: 답변을 주신 두 마스터에게 감사드립니다. 제 질문은 다음과 같습니다. 으아악
이를 구현하는 방법이 명확하지 않습니다. 조언을 해주실 수 있기를 바랍니다.
習慣沉默2017-06-26 10:52:29
어떤 효과를 말씀하시는 건가요? :hover Reverse, 너무 복잡한 것은 없습니다.
이미 예제를 직접 제시하셨으니 해당 코드를 열고 비교해 보세요.
특정 스타일이나 효과가 이해가 안 되시면 더 자세히 물어보셔도 됩니다.
전체를 구현하는 방법을 직접적으로 물어보기에는 너무 광범위합니다.
구현 예를 제시했습니까? CSS와 JS가 표시되어 있으므로 직접 참조할 수 있습니다.
새로 추가된 질문을 기준으로 합니다
왼쪽 탐색에서 디자인과 같은 큰 라벨을 클릭하면 원본 라벨이 자동으로 축소되고 현재 ul이 팝업되며, 오른쪽 콘텐츠는 그에 따라 변경됩니다.
큰 라벨을 클릭할 때마다 실제로 다른 페이지로 이동하는 것을 볼 수 있습니다. 모든 큰 라벨 아래의 ul은 기본적으로 닫혀 있습니다.
그러면 현재 페이지에 따르면 현재 대형 레이블에 활성 클래스 이름이 있고 열려는 ul이 이를 따르므로 간단합니다.
css 메소드는 .active + ul { display:block; }
jquery 메소드는 $('.active').next('ul').css('display','block');
다른 방법은 모두 활성 활동 태그를 가져오고 그 아래에 표시할 작은 태그 목록을 나타냅니다.
예시하신 내용에 따르면 CSS로 작성하지 않고 style 속성에 삽입하였기 때문에 js를 이용하여 구현해야 합니다.
学习ing2017-06-26 10:52:29
마우스를 위에 올렸을 때 변색 효과를 원하시나요?
CSS로 구현한 경우 왼쪽 목록을 사용한 후 스타일을 변경하고, :hoverpseudo-class를 사용하여 마우스를 위로 이동하는 스타일에 맞춰
예를 들어
JS로 구현하는 경우 해당 요소의 마우스 진입 이벤트를 모니터링해야 합니다onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave.마우스가 떠날 때 마우스가 지나갈 때 설정한 스타일을 일반 스타일로 복원해야 합니다.
다음 번에 처음 질문하실 때 문제의 세부 사항을 명확하게 설명하는 것이 좋습니다. 그렇지 않으면 응답자의 시간이 낭비됩니다.
나중에 문의하신 질문에 대한 답변은
왼쪽의 HTML 레이아웃은 아마 이런 느낌이겠죠
으아악그런 다음 위에서 언급한 대로 흰색으로 표시된 부분 위로 마우스를 이동합니다.
클릭하면 클릭한 <li>에 CSS 클래스(예: .active)를 추가한 다음 이전 <li>加上一个CSS类，比如.active，然后，加上之前的:hover를 추가하면 CSS는 다음과 유사합니다.
물론, 이 예시에서는 현재 라벨과 마우스오버 스타일이 동일하므로 ul li:hover和ul li.active를 결합하여
이렇게 하면 탭을 전환할 수 없습니다. 오른쪽의 HTML 레이아웃은 다음과 같습니다.
으아악기본적으로 CSS는 #main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active 클래스를 표시하는 데 사용되며 그렇지 않으면 숨겨집니다.
그런 다음 JS 이벤트를 작성하세요. 하지만 네이티브 이벤트를 작성하는 것이 더 어렵습니다. 다음은 작성 방법의 두 가지 예입니다.
으아악
jQuery 라이브러리를 사용하면 다음과 같이 훨씬 간단해집니다.
결론