1
A
답변
0
자바 스크립트 만 사용하는 것이 좋습니다.
개방 할 필요가 섹션 내부의 앵커에 ID를 추가
<section id="about"> <h2><a id="tab-active" href="#about">About Us</a></h2> <p>Tab content here</p>
자동으로 앵커를 클릭하여 자바 스크립트를 추가
document.getElementById('tab-active').click();
는 여기 Javascript로 제공된 전체 예제 :
는//JS
document.getElementById('tab-active').click();
/*CSS*/
/*Define Accordion box*/
.accordion {
width:830px;
overflow:hidden;
margin:10px auto;
color:#474747;
background:#414141;
padding:10px;
}
.accordion section{
float:left;
overflow:hidden;
color:#333;
cursor:pointer;
background: #333;
margin:3px;
}
.accordion section:hover {
background:#444;
}
.accordion section p {
display:none;
}
.accordion section:after{
position:relative;
font-size:24px;
color:#000;
font-weight:bold;
}
.accordion section:nth-child(1):after{ content:'1'; }
.accordion section:nth-child(2):after{ content:'2'; }
.accordion section:nth-child(3):after{ content:'3'; }
.accordion section:nth-child(4):after{ content:'4'; }
.accordion section:nth-child(5):after{ content:'5'; }.accordion section:target {
background:#FFF;
padding:10px;
}
.accordion section:target:hover {
background:#FFF;
}
.accordion section:target h2 {
width:100%;
}
.accordion section:target h2 a{
color:#333;
padding:0;
}
.accordion section:target p {
display:block;
}
.accordion section h2 a{
padding:8px 10px;
display:block;
font-size:16px;
font-weight:normal;
color:#eee;
text-decoration:none;
}
.horizontal section{
width:5%;
height:250px;
-moz-transition: width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
/*Position the number of the slide*/
.horizontal section:after{
top:140px;
left:15px;
}
/*Header of closed slide*/
.horizontal section h2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width:240px;
position:relative;
left:-100px;
top:85px;
}
/*On mouse over open slide*/
.horizontal :target{
width:73%;
height:230px;
}
.horizontal :target h2{
top:0px;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
<!-- HTML -->
<div class="accordion horizontal">
<section id="about">
<h2><a id="tab-active" href="#about">About Us</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elemaentum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section id="services">
<h2><a href="#services">Services</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
</div>
관련 문제
- 1. PGT 및 PGTIOUs 저장 CAS 생성
- 2. A "_"나는 <A HREF 코드
- 3. 나는 <a href="http://guides.rubyonrails.org/layouts_and_rendering.html" rel="nofollow">official page</a> DoubleRenderError
- 4. PHP : 양식을 만들어 <a href
- 5. Angular js로 수평 아코디언을 만드는 방법은 무엇입니까?
- 6. <A HREF 이름 여기에 일부
- 7. 나는 (그것을 모바일 웹 사이트를 표시) 수평 스크롤없이 표시 희망</p> <p><a href="http://www.laposte.net/" rel="nofollow">http://www.laposte.net/</a></p> <p>웹보기이 웹 사이트는 호환 희망
- 8. <a href>
- 9. 나는 연산자를 오버로드하려고합니다. <<
- 10. 나는 <a href="http://dhtmlx.com/touch/designer/" rel="nofollow">DHTMLx Touch online editor</a></p> <p>을 사용하고
- 11. <a href="#">
- 12. <a href
- 13. 나는 <fb:tab>
- 14. 수평 아코디언 - 그래서</p> <p>... .toggle 사용하고는이에 대한 것의 세련되지 못한 방법 인 경우
- 15. 아코디언 내의 아코디언이 부모 아코디언을 축소합니다.
- 16. <a href="link.html">
- 17. 탈착, 나는 이번 주말에 <a href="http://jqfundamentals.com/book/index.html" rel="nofollow">jqFundamentals</a> 읽고 있었다
- 18. JQuery와 아코디언 수평 효과
- 19. 선택 디렉토리 나는 다음과 같은 코드가 <pre><code><a href="#" id="" download="">Save Image</a> </code></pre> <p></p>을 실행 한 이미지
- 20. 내가 <a href="http://formvalidation.io/" rel="nofollow">FormValidation</a> 플러그인을 사용하고
- 21. 어떻게이 <a href="https://github.com/JanX2/CoolOutliner" rel="nofollow noreferrer">link</a>에서 NSOutlineview을 언급 한
- 22. XPath : "InnerHtml"의 "Exclude"태그 (<a href="">InnerHtml<span>excludeme</span></a>
- 23. 나는 그것은 UIControl의 서브 클래스의 <a href="https://github.com/samvermette/SVSegmentedControl." rel="nofollow">SVSegmentedControl</a></p> <p>의 인스턴스에 액세스하려고
- 24. 가 나는 <a href="http://smartphones.findthebest.com/" rel="nofollow">http://smartphones.findthebest.com/</a></p> <p>에 아름다운 차트 및 그래프로 찾고있다 findthebest.com
- 25. 나는 목록 <a href="http://youtu.be/ZbXSOX2kHys" rel="nofollow">this animation</a></p> <p>를 만들기 위해 노력하고있어 UICollectionView
- 26. 왜 <a href="http://networkx.lanl.gov/examples/" rel="nofollow">networkx.lanl.gov/examples</a></p> <p>에서 나는 weighted_graph 예를 실행할 때마다 발견
- 27. 나는 내 DWM config 파일에서 <strong><a href="http://dwm.suckless.org/customisation/rules" rel="nofollow">rule</a></strong> 다음 한
- 28. <a href = "/ test /"콘텐츠를로드하는 방법은 무엇입니까?
- 29. jqtree가 <a href="http://mbraak.github.io/jqTree/" rel="nofollow">jqtree docs</a>에서
- 30. <a href=""></a> 작동하지 않습니다.
아마, 그래 ... 난 자바 스크립트에 익숙하지 않다 –