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

중고장터 more

쓰기

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

wingback

2021-12

2021-12-26 23:51:01

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

쓰기

590/5687

번호	제목Page 590/5687	글쓴이	날짜	조회	추천
	(광고) 단통법 시대의 인터넷가입 가이드(ver2.0) (228)	백메가	2015-12	1524307	25
(광고) 단통법 시대의 인터넷가입 가이드(… (228) 2015-12 1524307 1 백메가
	[필독] 처음 오시는 분을 위한 안내 (727)	정은준1	2014-05	4988306	0
[필독] 처음 오시는 분을 위한 안내 (727) 2014-05 4988306 1 정은준1
101941	스카시 관련 급 질문입니다. (3)	김재현	2003-02	10045	18
스카시 관련 급 질문입니다. (3) 2003-02 10045 1 김재현
101940	biso 로 들어갈 수 없습니다. (2)	이원복	2003-06	8640	18
biso 로 들어갈 수 없습니다. (2) 2003-06 8640 1 이원복
101939	ebay 수수료 관련 문의 (3)	장종명	2007-05	4686	18
ebay 수수료 관련 문의 (3) 2007-05 4686 1 장종명
101938	[질문] 네트워크 연결 문제 (1)	한명훈	2007-06	4590	18
[질문] 네트워크 연결 문제 (1) 2007-06 4590 1 한명훈
101937	[re] 듀얼구성시 램을 꼭 ECC램으로 해야하나요? 그 필요성에 대해 답변을...	임병기	2002-05	16392	18
[re] 듀얼구성시 램을 꼭 ECC램으로 해야… 2002-05 16392 1 임병기
101936	디스크관리에서 "하드디스크 순서"가 궁금합니다 (1)	김춘식	2006-02	7718	18
디스크관리에서 "하드디스크 순서�… (1) 2006-02 7718 1 김춘식
101935	CD_RW 에서 PARITY 는 무슨 뜻인가요? (3)	김용언	2006-04	5696	18
CD_RW 에서 PARITY 는 무슨 뜻인가요? (3) 2006-04 5696 1 김용언
101934	AMD 800시리즈 지원보드중 SLI 되는 녀석이 있나요? (4)	신우섭	2006-06	4691	18
AMD 800시리즈 지원보드중 SLI 되는 녀석… (4) 2006-06 4691 1 신우섭
101933	메인보드의 LVDS 인터페이스 질문. (4)	서태희	2006-07	5745	18
메인보드의 LVDS 인터페이스 질문. (4) 2006-07 5745 1 서태희
101932	A7M266D FSB설정에 대한 질문입니다. (3)	김학영	2004-05	7614	18
A7M266D FSB설정에 대한 질문입니다. (3) 2004-05 7614 1 김학영
101931	Beowulf 나 openMosix 사용 또는 구축해보신 분들 있나요? (6)	맹승섭	2007-05	4556	18
Beowulf 나 openMosix 사용 또는 구축해보… (6) 2007-05 4556 1 맹승섭
101930	윈 2003 서버 스탠다드 인증 땜에 로그온이 안 되요~~ (4)	도석림	2007-10	5403	18
윈 2003 서버 스탠다드 인증 땜에 로그온… (4) 2007-10 5403 1 도석림
101929	SBC보드란 어떤용도에 쓰는 보드 입니까 (4)	유창현	2002-06	17905	18
SBC보드란 어떤용도에 쓰는 보드 입니까 (4) 2002-06 17905 1 유창현
101928	NAS에 대한 정보 부탁드립니다. (4)	이상원	2003-05	10700	18
NAS에 대한 정보 부탁드립니다. (4) 2003-05 10700 1 이상원
101927	DL760 서버 CPU 인식문제 (1)	권종일	2008-06	5032	18
DL760 서버 CPU 인식문제 (1) 2008-06 5032 1 권종일
101926	수세리눅스10 쓰시는분....FTP서버설정에 관해서 답변좀 주세요. (6)	김건우	2008-08	5749	18
수세리눅스10 쓰시는분....FTP서버설정에 … (6) 2008-08 5749 1 김건우
101925	[질문] MPX보드 중 mATX 타입보드 있나요? (5)	한동훈	2005-05	6434	18
[질문] MPX보드 중 mATX 타입보드 있나요? (5) 2005-05 6434 1 한동훈
101924	웹써핑 중 발생한 에러 (4)	강경보	2003-09	9522	18
웹써핑 중 발생한 에러 (4) 2003-09 9522 1 강경보
101923	USB2.0 포트와 허브사용시 전원공급 문제 (6)	홍영표	2006-09	6071	18
USB2.0 포트와 허브사용시 전원공급 문제 (6) 2006-09 6071 1 홍영표
101922	이상한게 있어서 질문드려요... (1)	류장호	2004-09	7850	18
이상한게 있어서 질문드려요... (1) 2004-09 7850 1 류장호