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

구매 more

쓰기

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

wingback

2021-12

2021-12-26 23:51:01

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

쓰기

581/5678

번호	제목Page 581/5678	글쓴이	날짜	조회	추천
	[필독] 처음 오시는 분을 위한 안내 (726)	정은준1	2014-05	4940428	0
[필독] 처음 오시는 분을 위한 안내 (726) 2014-05 4940428 1 정은준1
	(광고) 단통법 시대의 인터넷가입 가이드(ver2.0) (228)	백메가	2015-12	1477309	25
(광고) 단통법 시대의 인터넷가입 가이드(… (228) 2015-12 1477309 1 백메가
101952	IP 추적에 대한 문의 입니다. 법적으로다가... (7)	김장우	2012-09	10277	0
IP 추적에 대한 문의 입니다. 법적으로다… (7) 2012-09 10277 1 김장우
101951	DVI 케이블 어떤제품을 쓰십니까? (4)	정원웅	2003-10	10277	7
DVI 케이블 어떤제품을 쓰십니까? (4) 2003-10 10277 1 정원웅
101950	vmware + sata 대 Vmware + SSD 성능 문의 드립니다. (9)	제주김재민	2011-12	10277	0
vmware + sata 대 Vmware + SSD 성능 문… (9) 2011-12 10277 1 제주김재민
101949	i will dbd100 질문입니다~ (2)	최두한	2003-12	10277	44
i will dbd100 질문입니다~ (2) 2003-12 10277 1 최두한
101948	모니터 질문 입니다... (7)	조항주	2003-12	10277	11
모니터 질문 입니다... (7) 2003-12 10277 1 조항주
101947	[질문] Mini PCI-E 슬롯에 mSATA SSD 쓸 수 있을까요? (7)	일반유저	2017-03	10276	1
[질문] Mini PCI-E 슬롯에 mSATA SSD 쓸 … (7) 2017-03 10276 1 일반유저
101946	아답텍 29160 사용시 스카시 cdrom 연결 했을때 ...??? (10)	강영호	2003-10	10276	7
아답텍 29160 사용시 스카시 cdrom 연결 … (10) 2003-10 10276 1 강영호
101945	HP ProLiant G7 Micro Server N54L 언제 풀릴까요? (4)	성투불패	2013-01	10276	0
HP ProLiant G7 Micro Server N54L 언제 … (4) 2013-01 10276 1 성투불패
101944	[re] nas라는 것의 정체가 뭔지 궁금하네요.	윤현호	2003-06	10276	65
[re] nas라는 것의 정체가 뭔지 궁금하네… 2003-06 10276 1 윤현호
101943	윈도우 라이선스에 대한 질문입니다. (1)	문추기	2003-11	10276	63
윈도우 라이선스에 대한 질문입니다. (1) 2003-11 10276 1 문추기
101942	3930k 4.8오버 문제 없을까요? (7)	짱돌매니아	2012-02	10275	0
3930k 4.8오버 문제 없을까요? (7) 2012-02 10275 1 짱돌매니아
101941	TYAN 230T 에 관해 질문드립니다.. (7)	이재훈	2002-12	10275	17
TYAN 230T 에 관해 질문드립니다.. (7) 2002-12 10275 1 이재훈
101940	레이드에 대해서는 왕초보 입니다. (2)	한창수	2003-01	10275	9
레이드에 대해서는 왕초보 입니다. (2) 2003-01 10275 1 한창수
101939	[성능 문의] E350M1 과 t2390 의 성능 차이를 알고 싶습니다. (1)	이종원	2011-02	10275	0
[성능 문의] E350M1 과 t2390 의 성능 차… (1) 2011-02 10275 1 이종원
101938	장치관리자의 PCI 입력 장치 드라이버를 찾고 있어요. (6)	아름다운노을	2015-05	10275	0
장치관리자의 PCI 입력 장치 드라이버를 … (6) 2015-05 10275 1 아름다운노을
101937	2.5인치 서버 vs 3.5인치 서버 (13)	밥한끼	2014-08	10275	0
2.5인치 서버 vs 3.5인치 서버 (13) 2014-08 10275 1 밥한끼
101936	씰링팬 속도 조절 가능여부.. (7)	김준유	2013-09	10275	0
씰링팬 속도 조절 가능여부.. (7) 2013-09 10275 1 김준유
101935	렉케이스(2U ECR9200R) 문의 입니다. (2)	홍성서	2003-06	10275	9
렉케이스(2U ECR9200R) 문의 입니다. (2) 2003-06 10275 1 홍성서
101934	제온의 공정이 언제부터 바뀌었습니까? (8)	조현규	2003-05	10274	5
제온의 공정이 언제부터 바뀌었습니까? (8) 2003-05 10274 1 조현규
101933	amd 듀얼보드 질문입니다. (7)	오승준	2003-12	10274	4
amd 듀얼보드 질문입니다. (7) 2003-12 10274 1 오승준