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

쓰기

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

wingback

2021-12

2021-12-26 23:51:01

조회 1703 추천 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

쓰기

587/5684

번호	제목Page 587/5684	글쓴이	날짜	조회	추천
	(광고) 단통법 시대의 인터넷가입 가이드(ver2.0) (228)	백메가	2015-12	1493913	25
(광고) 단통법 시대의 인터넷가입 가이드(… (228) 2015-12 1493913 1 백메가
	[필독] 처음 오시는 분을 위한 안내 (727)	정은준1	2014-05	4957468	0
[필독] 처음 오시는 분을 위한 안내 (727) 2014-05 4957468 1 정은준1
101943	리눅스 meminfo 분석관련,, (8)	찌록	2021-12	2476	0
리눅스 meminfo 분석관련,, (8) 2021-12 2476 1 찌록
101942	Mikrotic router 모드 설정 문의 (10)	lovei	2021-12	1653	0
Mikrotic router 모드 설정 문의 (10) 2021-12 1653 1 lovei
101941	<내용 수정> html asia 이용한 tab 생성 문의 드립니다. (5)	wingback	2021-12	1704	0
<내용 수정> html asia 이용한 tab … (5) 2021-12 1704 1 wingback
101940	i340-t4 윈도우10 지원 궁금합니다. (2)	inquisitive	2021-12	1918	0
i340-t4 윈도우10 지원 궁금합니다. (2) 2021-12 1918 1 inquisitive
101939	Gpu Cui 밴치 툴은 없을까요? (6)	GPGPU	2021-12	1554	0
Gpu Cui 밴치 툴은 없을까요? (6) 2021-12 1554 1 GPGPU
101938	휴맥스 igmp 관련 문의드립니다. (4)	toto	2021-12	1569	0
휴맥스 igmp 관련 문의드립니다. (4) 2021-12 1569 1 toto
101937	오징어 구매처 문의 (3)	CPU4	2021-12	1272	0
오징어 구매처 문의 (3) 2021-12 1272 1 CPU4
101936	갑자기 바이오스에서 usb인식이 안되요 (3)	우뭉	2021-12	2994	0
갑자기 바이오스에서 usb인식이 안되요 (3) 2021-12 2994 1 우뭉
101935	시놀로지 NAS 신제품 발표안했나요? (2)	osthek83	2021-12	1518	0
시놀로지 NAS 신제품 발표안했나요? (2) 2021-12 1518 1 osthek83
101934	혹시 이런 나사 이름을 아시나요? (7)	Psychophysi…	2021-12	1784	0
혹시 이런 나사 이름을 아시나요? (7) 2021-12 1784 1 Psychophysi…
101933	ECC 메모리좀 알려주세요^^ (6)	무슈슈	2021-12	1971	0
ECC 메모리좀 알려주세요^^ (6) 2021-12 1971 1 무슈슈
101932	바이오스에서 usb인식이 안되요 (5)	우뭉	2021-12	3708	0
바이오스에서 usb인식이 안되요 (5) 2021-12 3708 1 우뭉
101931	771cpu 775보드 테이프 작업 (7)	우뭉	2021-12	3067	0
771cpu 775보드 테이프 작업 (7) 2021-12 3067 1 우뭉
101930	슈퍼마이크로 X10DRG-Q보드 장차카능한 케이스 추천좀 (14)	짱님	2021-12	2023	0
슈퍼마이크로 X10DRG-Q보드 장차카능한 케… (14) 2021-12 2023 1 짱님
101929	그래픽카드 모자이크 증상 고칠 수 있을까요? (16)	최동현	2021-12	8691	0
그래픽카드 모자이크 증상 고칠 수 있을까… (16) 2021-12 8691 1 최동현
101928	문의 드립니다. ^^ (4)	황진우	2021-12	1636	0
문의 드립니다. ^^ (4) 2021-12 1636 1 황진우
101927	서버를 운영하는 전반적인 틀을 여쭤보고 싶습니다. (18)	startserver	2021-12	1873	0
서버를 운영하는 전반적인 틀을 여쭤보고 … (18) 2021-12 1873 1 startserver
101926	dockerfile 베이스 이미지인 alpine 질문입니다. (2)	rldw221	2021-12	1453	0
dockerfile 베이스 이미지인 alpine 질문… (2) 2021-12 1453 1 rldw221
101925	이증상을 불량이라고 봐야할까요? (19)	안형곤	2021-12	4371	0
이증상을 불량이라고 봐야할까요? (19) 2021-12 4371 1 안형곤
101924	중고 파워 서플라이 구입 테스트 방법 문의 드립니다. (8)	죠슈아	2021-12	2480	0
중고 파워 서플라이 구입 테스트 방법 문… (8) 2021-12 2480 1 죠슈아