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

쓰기

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

wingback

2021-12

2021-12-26 23:51:01

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

쓰기

589/5686

번호	제목Page 589/5686	글쓴이	날짜	조회	추천
	[필독] 처음 오시는 분을 위한 안내 (727)	정은준1	2014-05	4975480	0
[필독] 처음 오시는 분을 위한 안내 (727) 2014-05 4975480 1 정은준1
	(광고) 단통법 시대의 인터넷가입 가이드(ver2.0) (228)	백메가	2015-12	1511636	25
(광고) 단통법 시대의 인터넷가입 가이드(… (228) 2015-12 1511636 1 백메가
101946	rj45 콘솔 연결방법 (5)	이현길	2016-08	10258	0
rj45 콘솔 연결방법 (5) 2016-08 10258 1 이현길
101945	하드에 대해서 궁금한거요 (3)	이경진	2003-06	10257	129
하드에 대해서 궁금한거요 (3) 2003-06 10257 1 이경진
101944	815epb 칩셋의 메인보드의 성능은 어떤지요? (8)	최정우	2003-11	10257	6
815epb 칩셋의 메인보드의 성능은 어떤지… (8) 2003-11 10257 1 최정우
101943	Cisco 스위치에서 L3 기능을 사용하고 싶습니다. (7)	황혼을향해	2014-03	10257	0
Cisco 스위치에서 L3 기능을 사용하고 싶… (7) 2014-03 10257 1 황혼을향해
101942	TYAN 보드 질문 (1)	최병덕	2003-11	10257	71
TYAN 보드 질문 (1) 2003-11 10257 1 최병덕
101941	인텔3 866인데 질문 있습니다. (2)	손재훈	2003-05	10256	45
인텔3 866인데 질문 있습니다. (2) 2003-05 10256 1 손재훈
101940	동영상 편집[하드웨어]관련 질문입니다. (9)	장현모	2003-05	10256	9
동영상 편집[하드웨어]관련 질문입니다. (9) 2003-05 10256 1 장현모
101939	foxconn메인보드 개조제온 (2)	플로틴	2014-11	10256	0
foxconn메인보드 개조제온 (2) 2014-11 10256 1 플로틴
101938	tx100 구성품 (3)	읍내노는오빠	2013-08	10256	0
tx100 구성품 (3) 2013-08 10256 1 읍내노는오빠
101937	HD티비카드로 녹화해서 DVD에 구울때..... (12)	이승현	2004-03	10256	69
HD티비카드로 녹화해서 DVD에 구울때..... (12) 2004-03 10256 1 이승현
101936	^^ 듀얼시스템에관해서 질문임당... (8)	김동준	2003-02	10256	4
^^ 듀얼시스템에관해서 질문임당... (8) 2003-02 10256 1 김동준
101935	듀얼이 탱크처럼 믿음직 합니까 ? (7)	박동선	2003-11	10255	3
듀얼이 탱크처럼 믿음직 합니까 ? (7) 2003-11 10255 1 박동선
101934	EIDE CD-RW 가 네로에서 안구워지는...현상 아시는분??? (1)	권영웅	2002-11	10255	44
EIDE CD-RW 가 네로에서 안구워지는...현… (1) 2002-11 10255 1 권영웅
101933	웹서버 os 어떤 것을 선택해야 할까요? (17)	나랑말말	2016-07	10255	1
웹서버 os 어떤 것을 선택해야 할까요? (17) 2016-07 10255 1 나랑말말
101932	제온 E5440에 잘맞는 775 메인보드는 뭐가있나요? (8)	이현근	2014-05	10254	0
제온 E5440에 잘맞는 775 메인보드는 뭐가… (8) 2014-05 10254 1 이현근
101931	SKT 스마트폰분실 및 사용에 관한 질문입니다 (4)	스카이	2011-10	10254	0
SKT 스마트폰분실 및 사용에 관한 질문입… (4) 2011-10 10254 1 스카이
101930	start unit request fail 이런메세지가.....무슨뜻인가요? (2)	김진일	2003-11	10254	43
start unit request fail 이런메세지가...… (2) 2003-11 10254 1 김진일
101929	엘자 시너지2가 괜찮은 제품인가요? (2)	정명현	2003-06	10254	73
엘자 시너지2가 괜찮은 제품인가요? (2) 2003-06 10254 1 정명현
101928	MSSQL관리툴 추천좀 부탁드려보아요. (4)	2c장규식	2014-05	10253	0
MSSQL관리툴 추천좀 부탁드려보아요. (4) 2014-05 10253 1 2c장규식
101927	HD tune에서의 읽기 오류율 증가 문제 (4)	the촌놈	2016-07	10253	0
HD tune에서의 읽기 오류율 증가 문제 (4) 2016-07 10253 1 the촌놈