<내용 수정> html asia 이용한 tab 생성 문의 드립니다.

쓰기

<내용 수정> html asia 이용한 tab 생성 문의 드립니다.

wingback

2021-12

2021-12-26 23:51:01

조회 1718 추천 0

안녕하세요

html 공부 중에 어느 사이트에서 tab 기능이 마음에 들어 공부 해서 써먹어 보려고 긁어 왔는데

동작이 잘 되지 않아 문의 드립니다.

초보인 제가 보기에 문제는 없어 보이는데 뭐가 빠진건지 탭이 클릭이 되지 않네요...

고수님들 확인 한번 부탁 드립니다.ㅠㅠ

html 을 첨부파일로 올리겠습니다.

제가 너무 생각 없이 업로드를 한 것 같습니다.

소스만 다시 올려 드립니다.

aria 부분만 확인 부탁드립니다. 클릭이 안되는 이유가 뭘까요?

<head>

/* Tabby Responsive Tabs: cubecolour.co.uk/tabby-responsive-tabs-customiser */

.responsive-tabs .responsive-tabs__heading {display: none;}.responsive-tabs .responsive-tabs__list__item {display: inline;cursor: pointer;}.responsive-tabs-wrapper {clear: both;margin-bottom: 20px;zoom: 1;}.responsive-tabs-wrapper:before,.responsive-tabs-wrapper:after {content: "";display: table;}.responsive-tabs-wrapper:after {clear: both;}.responsive-tabs .responsive-tabs__heading:focus,.responsive-tabs .responsive-tabs__list__item:focus {outline: 1px solid transparent;}.responsive-tabs .responsive-tabs__heading--active:focus,.responsive-tabs .responsive-tabs__list__item--active:focus {outline: none;}.responsive-tabs ul.responsive-tabs__list {font-size: 18px;line-height: 18px;margin: 20px 0 0 12px;padding: 0;}.responsive-tabs .responsive-tabs__list__item {background: transparent;border: 1px solid transparent;border-bottom: none;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #999999;font-size: 18px;line-height: 19px;text-transform: inherit;margin: 1px 12px 0 0;padding: 10px 12px 10px;white-space: nowrap;float: left;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.responsive-tabs .responsive-tabs__list__item .fa {margin-right: 8px;line-height: 0.8;}.responsive-tabs .responsive-tabs__list__item:hover {color: #333333;background: transparent;}.responsive-tabs .responsive-tabs__list__item--active, .responsive-tabs .responsive-tabs__list__item--active:hover {background: #ffffff;border-color: #dddddd;color: #666666;padding-bottom: 11px;margin-top: 0;position: relative;top: 1px;}.responsive-tabs .responsive-tabs__panel {background: #ffffff;border: 1px solid #dddddd;border-top: 1px solid #dddddd;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-radius-topleft: 0px;border-top-left-radius: 0px;clear: left;margin-bottom: 0;padding: 20px 20px 0;word-wrap: break-word;}.responsive-tabs .responsive-tabs__panel:after { content: "";display: block; height: 0; clear: both;}.responsive-tabs__list .fa {display:none;}@media (min-width: 732px) {.responsive-tabs .responsive-tabs__panel--closed-accordion-only {display: block;}}@media (max-width: 731px) {.responsive-tabs .responsive-tabs__list {display: none;}.responsive-tabs .responsive-tabs__heading {display: block;cursor: pointer;}.responsive-tabs-wrapper {border-top: 1px solid #cccccc;}.responsive-tabs .responsive-tabs__heading {background: #ffffff;border: 1px solid #cccccc;border-top: none;color: #777777;font-size: 18px;font-weight: normal;text-transform: inherit;margin: 0;padding: 10px 0;padding-left: 20px;position: relative;}.responsive-tabs .responsive-tabs__heading .fa {margin-right: 8px;display:none;}.responsive-tabs .responsive-tabs__heading:after {border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #777777;content:"";display: block;position: absolute;right: 20px;top: 20px;height: 0; width: 0; }.responsive-tabs .responsive-tabs__heading:hover {background: #eeeeee;color: #777777;}.responsive-tabs .responsive-tabs__heading:hover:after {border-top: 6px solid #777777;}.responsive-tabs .responsive-tabs__heading--active,.responsive-tabs .responsive-tabs__heading--active:hover {background: #cccccc;color: #ffffff;}.responsive-tabs .responsive-tabs__heading--active:after,.responsive-tabs .responsive-tabs__heading--active:hover:after {border-bottom: 6px solid #ffffff;border-top: 0;top: 18px;}.responsive-tabs .responsive-tabs__panel {background: #ffffff;border: 1px solid #cccccc;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;border-top: none;margin: 0;padding: 0 20px;padding-top: 20px;}}</style>

/* Tabby Responsive Tabs: cubecolour.co.uk/tabby-responsive-tabs-customiser */

</head>

<li class="responsive-tabs__list__item responsive-tabs__list__item--active" id="tablist1-tab1" aria-controls="tablist1-panel1" role="tab" tabindex="0">Configurations</li>

<li class="responsive-tabs__list__item" id="tablist1-tab2" aria-controls="tablist1-panel2" role="tab" tabindex="0">Branch</li>

<p class="tabtitle responsive-tabs__heading" tabindex="0">Configurations</p>

<p></p>

<p>Want to take a look for yourself? Here you will find the final configuration of each device.</p>

</div><p class="tabtitle responsive-tabs__heading" tabindex="0">Branch</p>

<pre><code>hostname Branch

ip cef

interface FastEthernet0/0

ip address 172.16.1.2 255.255.255.0

interface FastEthernet0/1

no ip address

end</code></pre>

</div><p class="tabtitle responsive-tabs__heading" tabindex="0">HQ</p>

<pre><code>hostname HQ

ip cef

interface FastEthernet0/0

ip address 172.16.1.1 255.255.255.0

transport input all

end</code></pre>

</div><p class="tabtitle responsive-tabs__heading" tabindex="0">P</p>

<pre><code>hostname P

ip cef

interface Loopback0

ip address 2.2.2.2 255.255.255.255

interface FastEthernet0/0

ip address 192.168.12.2 255.255.255.0

mpls ip

interface FastEthernet0/1

ip address 192.168.23.2 255.255.255.0

mpls ip

router ospf 1

network 192.168.12.0 0.0.0.255 area 0

network 192.168.23.0 0.0.0.255 area 0

network 2.2.2.2 0.0.0.0 area 0

end</code></pre>

</div><p class="tabtitle responsive-tabs__heading" tabindex="0">PE1</p>

<pre><code>hostname PE1

ip cef

interface Loopback0

ip address 1.1.1.1 255.255.255.255

interface FastEthernet0/0

no ip address

xconnect 3.3.3.3 13 encapsulation mpls

interface FastEthernet0/1

ip address 192.168.12.1 255.255.255.0

mpls ip

router ospf 1

network 1.1.1.1 0.0.0.0 area 0

network 192.168.12.0 0.0.0.255 area 0

end</code></pre>

</div><p class="tabtitle responsive-tabs__heading" tabindex="0">PE2</p>

<pre><code>hostname PE2

ip cef

interface Loopback0

ip address 3.3.3.3 255.255.255.255

interface FastEthernet0/0

ip address 192.168.23.3 255.255.255.0

mpls ip

interface FastEthernet0/1

no ip address

xconnect 1.1.1.1 13 encapsulation mpls

router ospf 1

network 192.168.23.0 0.0.0.255 area 0

network 3.3.3.3 0.0.0.0 area 0

end</code></pre>

짧은글 일수록 신중하게.



제온프로 2021-12 받아서 열어볼뻔 했네요.. 소스로 올려주세요.. 받아서 열어볼뻔 했네요.. 소스로 올려주세요..



화란 2021-12 /* Tabby Responsive Tabs: cubecolour.co.uk/tabby-responsive-tabs-customiser / .responsive-tabs .responsive-tabs__heading {display: none;}.responsive-tabs .responsive-tabs__list__item {display: inline;cursor: pointer;}.responsive-tabs-wrapper {clear: both;margin-bottom: 20px;zoom: 1;}.responsive-tabs-wrapper:before,.responsive-tabs-wrapper:after {content: "";display: table;}.responsive-tabs-wrapper:after {clear: both;}.responsive-tabs .responsive-tabs__heading:focus,.responsive-tabs .responsive-tabs__list__item:focus {outline: 1px solid transparent;}.responsive-tabs .responsive-tabs__heading--active:focus,.responsive-tabs .responsive-tabs__list__item--active:focus {outline: none;}.responsive-tabs ul.responsive-tabs__list {font-size: 18px;line-height: 18px;margin: 20px 0 0 12px;padding: 0;}.responsive-tabs .responsive-tabs__list__item {background: transparent;border: 1px solid transparent;border-bottom: none;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #999999;font-size: 18px;line-height: 19px;text-transform: inherit;margin: 1px 12px 0 0;padding: 10px 12px 10px;white-space: nowrap;float: left;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.responsive-tabs .responsive-tabs__list__item .fa {margin-right: 8px;line-height: 0.8;}.responsive-tabs .responsive-tabs__list__item:hover {color: #333333;background: transparent;}.responsive-tabs .responsive-tabs__list__item--active, .responsive-tabs .responsive-tabs__list__item--active:hover {background: #ffffff;border-color: #dddddd;color: #666666;padding-bottom: 11px;margin-top: 0;position: relative;top: 1px;}.responsive-tabs .responsive-tabs__panel {background: #ffffff;border: 1px solid #dddddd;border-top: 1px solid #dddddd;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-radius-topleft: 0px;border-top-left-radius: 0px;clear: left;margin-bottom: 0;padding: 20px 20px 0;word-wrap: break-word;}.responsive-tabs .responsive-tabs__panel:after { content: "";display: block; height: 0; clear: both;}.responsive-tabs__list .fa {display:none;}@media (min-width: 732px) {.responsive-tabs .responsive-tabs__panel--closed-accordion-only {display: block;}}@me 소스가 이러면 답해줄 분 거의 없을텐데요... / Tabby Responsive Tabs: cubecolour.co.uk/tabby-responsive-tabs-customiser */ .responsive-tabs .responsive-tabs__heading {display: none;}.responsive-tabs .responsive-tabs__list__item {display: inline;cursor: pointer;}.responsive-tabs-wrapper {clear: both;margin-bottom: 20px;zoom: 1;}.responsive-tabs-wrapper:before,.responsive-tabs-wrapper:after {content: "";display: table;}.responsive-tabs-wrapper:after {clear: both;}.responsive-tabs .responsive-tabs__heading:focus,.responsive-tabs .responsive-tabs__list__item:focus {outline: 1px solid transparent;}.responsive-tabs .responsive-tabs__heading--active:focus,.responsive-tabs .responsive-tabs__list__item--active:focus {outline: none;}.responsive-tabs ul.responsive-tabs__list {font-size: 18px;line-height: 18px;margin: 20px 0 0 12px;padding: 0;}.responsive-tabs .responsive-tabs__list__item {background: transparent;border: 1px solid transparent;border-bottom: none;-webkit-border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-moz-border-radius-topright: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #999999;font-size: 18px;line-height: 19px;text-transform: inherit;margin: 1px 12px 0 0;padding: 10px 12px 10px;white-space: nowrap;float: left;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.responsive-tabs .responsive-tabs__list__item .fa {margin-right: 8px;line-height: 0.8;}.responsive-tabs .responsive-tabs__list__item:hover {color: #333333;background: transparent;}.responsive-tabs .responsive-tabs__list__item--active, .responsive-tabs .responsive-tabs__list__item--active:hover {background: #ffffff;border-color: #dddddd;color: #666666;padding-bottom: 11px;margin-top: 0;position: relative;top: 1px;}.responsive-tabs .responsive-tabs__panel {background: #ffffff;border: 1px solid #dddddd;border-top: 1px solid #dddddd;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-radius-topleft: 0px;border-top-left-radius: 0px;clear: left;margin-bottom: 0;padding: 20px 20px 0;word-wrap: break-word;}.responsive-tabs .responsive-tabs__panel:after { content: "";display: block; height: 0; clear: both;}.responsive-tabs__list .fa {display:none;}@media (min-width: 732px) {.responsive-tabs .responsive-tabs__panel--closed-accordion-only {display: block;}}@me 소스가 이러면 답해줄 분 거의 없을텐데요...



트니아빠 2021-12 그 홈페이지 주소를 몰라서 자신은 없는데... 왠지모르게 Shiny로 구현한 것 같습니다. 그 홈페이지 주소를 몰라서 자신은 없는데... 왠지모르게 Shiny로 구현한 것 같습니다.



NaN 2021-12 js 로 해당하는 탭의 div의 display:none값을 display:block등 보이게 만들어주는것 같네요. 보내주신소스에서 딱히 탭을 노출시켜주는 기능이 없네요.. js 로 해당하는 탭의 div의 display:none값을 display:block등 보이게 만들어주는것 같네요. 보내주신소스에서 딱히 탭을 노출시켜주는 기능이 없네요..



NaN 2021-12 그냥 다른사이트 카피하시는것도 잘 디버깅이안되시는거보니.. 초보신것같은데 그냥 jQuery tab widget사용하셔서 CSS만 수정하셔서 사용하시는게 빠르지 않을까... 의견드립니다.. https://jqueryui.com/tabs/ 그냥 다른사이트 카피하시는것도 잘 디버깅이안되시는거보니.. 초보신것같은데 그냥 jQuery tab widget사용하셔서 CSS만 수정하셔서 사용하시는게 빠르지 않을까... 의견드립니다.. https://jqueryui.com/tabs/

로그인 하시면 댓글을 남길 수 있습니다

쓰기

QnA

쓰기

588/5685

번호	제목Page 588/5685	글쓴이	날짜	조회	추천
	(광고) 단통법 시대의 인터넷가입 가이드(ver2.0) (228)	백메가	2015-12	1503481	25
(광고) 단통법 시대의 인터넷가입 가이드(… (228) 2015-12 1503481 1 백메가
	[필독] 처음 오시는 분을 위한 안내 (727)	정은준1	2014-05	4967087	0
[필독] 처음 오시는 분을 위한 안내 (727) 2014-05 4967087 1 정은준1
101958	시놀로지 공유기로 메쉬 사용중 스위치 죽는 현상.. (8)	니포	2021-12	1946	0
시놀로지 공유기로 메쉬 사용중 스위치 죽… (8) 2021-12 1946 1 니포
101957	dell optiplex 7040 부팅 에러 메시지 해결방법 아시는 분 계실까요~? (2)	녹차같은사랑	2021-12	3773	0
dell optiplex 7040 부팅 에러 메시지 해… (2) 2021-12 3773 1 녹차같은사랑
101956	dell optiplex 5040 지원 시피유 문의 ? 드려보아요 (7)	짱님	2021-12	1647	0
dell optiplex 5040 지원 시피유 문의 ? … (7) 2021-12 1647 1 짱님
101955	알뜰폰으로 이동하려고 하는데요.. (15)	NiteFlite9	2021-12	1589	0
알뜰폰으로 이동하려고 하는데요.. (15) 2021-12 1589 1 NiteFlite9
101954	WSL2 사용중이신분 계신가요? (11)	AMD빌런	2021-12	2211	0
WSL2 사용중이신분 계신가요? (11) 2021-12 2211 1 AMD빌런
101953	rx460 피이프라인 숫자 늘리는 방법이 있나요? (5)	늘파란	2021-12	2824	0
rx460 피이프라인 숫자 늘리는 방법이 있… (5) 2021-12 2824 1 늘파란
101952	메인보드 랜포트 교체가능한가요? (10)	가을바람	2021-12	4839	0
메인보드 랜포트 교체가능한가요? (10) 2021-12 4839 1 가을바람
101951	알리 물건이 통관보류가 떴는데.. 어느쪽에 문의해야 하나요? (3)	소주한병	2021-12	3554	0
알리 물건이 통관보류가 떴는데.. 어느쪽… (3) 2021-12 3554 1 소주한병
101950	구형 vga 중에 2gb 이상 가격대 성능비 있을까요? (9)	늘파란	2021-12	2779	0
구형 vga 중에 2gb 이상 가격대 성능비 있… (9) 2021-12 2779 1 늘파란
101949	his rx470 4gb 삼성램 vga 바이오스 이상증세? (6)	늘파란	2021-12	2945	0
his rx470 4gb 삼성램 vga 바이오스 이상… (6) 2021-12 2945 1 늘파란
101948	dell r730 16gb * 4 64gb로 2채널 구성 가능할까요? (1)	홀릭0o0	2021-12	1648	0
dell r730 16gb * 4 64gb로 2채널 구성 가… (1) 2021-12 1648 1 홀릭0o0
101947	pci 호환성 문제 문의 드립니다. (6)	inquisitive	2021-12	2750	0
pci 호환성 문제 문의 드립니다. (6) 2021-12 2750 1 inquisitive
101946	보조배터리 질문드립니다. 용량 거짓말인지 궁금합니다. (12)	검은콩	2021-12	2047	0
보조배터리 질문드립니다. 용량 거짓말인… (12) 2021-12 2047 1 검은콩
101945	델 T3420 메모리 사용 문의드립니다. (3)	앤드유저	2021-12	1335	0
델 T3420 메모리 사용 문의드립니다. (3) 2021-12 1335 1 앤드유저
101944	요즘 TV백라이트수리가 어려울까요 (15)	정상백	2021-12	3782	0
요즘 TV백라이트수리가 어려울까요 (15) 2021-12 3782 1 정상백
101943	리눅스 meminfo 분석관련,, (8)	찌록	2021-12	2485	0
리눅스 meminfo 분석관련,, (8) 2021-12 2485 1 찌록
101942	Mikrotic router 모드 설정 문의 (10)	lovei	2021-12	1660	0
Mikrotic router 모드 설정 문의 (10) 2021-12 1660 1 lovei
101941	<내용 수정> html asia 이용한 tab 생성 문의 드립니다. (5)	wingback	2021-12	1719	0
<내용 수정> html asia 이용한 tab … (5) 2021-12 1719 1 wingback
101940	i340-t4 윈도우10 지원 궁금합니다. (2)	inquisitive	2021-12	1938	0
i340-t4 윈도우10 지원 궁금합니다. (2) 2021-12 1938 1 inquisitive
101939	Gpu Cui 밴치 툴은 없을까요? (6)	GPGPU	2021-12	1561	0
Gpu Cui 밴치 툴은 없을까요? (6) 2021-12 1561 1 GPGPU