인프런 커뮤니티 질문&답변
작성한 질문수
선생님 탭 메뉴 콘텐츠 질문 있습니다...!
해결된 질문
작성
·
250
1
data-alt 속성 넣어서 제작했는데, 처음에 제작했을때는 잘 되다가 다시 확인해보니 연동이 되질 않습니다..
코드 실수가 있는지 확인 부탁드리겠습니다..ㅠㅠ
* 이 뿐만 아니라 WOW, tab menu, parallaxScroll 등 다른 제이쿼리도 연동이 됐다 안됐다 하네요..
다른 포폴 파일도 라이브러리가 됐다 안됐다 하는데, 혹시 이런 경우 보셨을까요..?ㅠㅠ
<!-- Sub menu list -->
.sub-menu > ul > li 를 클릭했을때 아래 각 section과 연동되어야함
<section class="sofa-collection tabs active" id="tab1">
<section class="bath-collection tabs" id="tab2">
<section class="bed-collection tabs" id="tab3">
<!-- Sub menu list -->
<div class="sub-menu">
<ul class="sub-menu-item">
<li data-alt="tab1" class="active"><a href="#">sofa</a></li>
<li data-alt="tab2"><a href="#">bathroom</a></li>
<li data-alt="tab3"><a href="#">bedroom</a></li>
</ul>
</div>
<!-- Section : inspiration-sofa-collection -->
<section class="sofa-collection tabs active" id="tab1">
<div class="sofa-inner">
<!-- Heading -->
<div class="sofa-heading utd wow">
<h2>THE HAY SOFA COLLECTION</h2>
<hr class="bar">
</div>
<!-- Quilton -->
<div class="sofa-content">
<div class="sofa-left ltr wow">
<div class="sofa-big" onclick="location.href='#none'">
<img src="img/inspiration-sofa-01.png">
<div class="sofa-headline">
<h3>QUILTON 3 SEATER</h3>
<p>
Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces.
<small class="inview"><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></small>
</p>
<div class="coll-btn">
<a href="#none" class="find-dealer">FIND DEALER</a>
</div>
</div>
</div>
</div>
<div class="sofa-right rtl wow">
<div class="sofa-items-up">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-11.png">
<span class="badge best">Best</span>
</div>
<p><ins>Quilton Duo Comb 19 Left</ins> / <ins>Slit High Table</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-12.png">
</div>
<p><ins>Quilton Ottoman</ins></p>
</div>
</div>
<div class="sofa-items-down">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-04.png">
<span class="badge new">New</span>
</div>
<p><ins>Quilton Combination 21 Right</ins> / <ins>Kofi</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-02.png">
</div>
<p><ins>Quilton Contrast base Comb 23 Left</ins> / <ins>Kofi</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
<div class="sofa-video">
<video class="video" width="800" controls>
<source src="videos/hay-Mags-Soft-Low-3-Seater-Sofa.mp4" type="">
</video>
</div>
<div class="section-text utd wow">
<h4>QUILTON</h4>
<p>
Described by the designers as a ‘quilted landscape sofa system’, Quilton serves as a central platform for living, working, socializing and relaxing. Offering a wide assortment of different modules, Doshi Levien’s multi-functional sofa provides the flexibility of a modular system with generous dimensions and sculpted forms. Its numerous upholstery choices include mono, duo, or with a black contrasting platform, with the finely-detailed quilted upholstery encapsulating the softness and volume of the foam and wadding seats and creating exceptional comfort. Quilton takes sofa design to a new level of versatility that makes it suitable for a wide range of domestic and public spaces.
</p>
</div>
<!-- MAGS -->
<div class="sofa-content flex-order">
<div class="sofa-right ltr wow">
<div class="sofa-items-up">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-05.png">
<span class="badge new">new</span>
</div>
<p><ins>MAGS 3 SEATER COMBINATION 1</ins> / <ins>DLM</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-06.png">
<span class="badge new">new</span>
</div>
<p style="font-size: 14px"><ins>MAGS 2,5 SEATER COMBINATION 3</ins></p>
</div>
</div>
<div class="sofa-items-down">
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-07.png">
</div>
<p><ins>Mags 3 Seater comb 1</ins> / <ins>Pouf</ins></p>
</div>
<div class="sofa-thum" onclick="location.href='#none'">
<div class="sofa-photo">
<img src="img/inspiration-sofa-08.png">
<span class="badge best">best</span>
</div>
<p><ins>Mags Sofa 3 seater comb 4</ins> / <ins>AAL 83</ins></p>
</div>
</div>
</div>
<div class="sofa-left rtl wow">
<div class="sofa-big" onclick="location.href='#none'">
<img src="img/inspiration-sofa-14.png">
<div class="sofa-headline">
<h3>MAGS 3 SEATER COMBINATION 1</h3>
<p>
Designed with maximum comfort and minimum details, the Mags sofa combines strong aesthetics with timelessness to create a HAY classic. Keeping superior comfort and quality in mind, Mags is built using a solid construction with durable, high-density foam and interior padding for optimal longevity. The low frame has a distinctly lounge feel, which is reinforced by the deep seats and results in an open, welcoming space.
<small class="inview">
<ins>MAGS SOFA</ins> / <ins>RAW RUG NO. 2</ins> / <ins>TULOU COFFEE TABLE</ins> / <ins>MOHAIR BLANKET</ins> / <ins>FIFTY-FIFTY FLOOR LAMP</ins>
</small>
</p>
<div class="coll-btn">
<a href="#none" class="find-dealer">FIND DEALER</a>
</div>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
<div class="section-text second utd wow">
<h4>MAGS</h4>
<p>
Designed with maximum comfort and minimum details, the Mags sofa ensures what lies beyond its strong aesthetic presence has an equally lasting impact. The wide range of functional modular units mean the sofa can be fully customised with chaise longue, corner modules or additional seats to suit any room or purpose, while the high quality upholstery options enables the sofa to find its own personality.
</p>
</div>
</div>
</section>
<!-- Section : inspiration-bath-collection -->
<section class="bath-collection tabs" id="tab2">
<div class="sofa-inner bath-inner">
<!-- Heading -->
<div class="sofa-heading bath-heading utd wow">
<h2>BATHROOM INSPIRATION</h2>
<hr class="bar">
</div>
<!-- Bath-container-->
<div class="sofa-video bath-video">
<video class="video" width="800" controls>
<source src="videos/hay-Waffle-Bathrobe-Waffle-Slippers.mp4" type="">
</video>
</div>
<div class="section-text utd wow">
<p>
These days, investing a little love and care in the domestic spaces we often neglect -- bathroom, we're looking at you! -- can make a world of difference. That's why we've created a range of fresh new products that are sure to brighten up that underappreciated space, from pretty and practical storage solutions like Basket, now available in new Spring colours, to the brilliant Chim Chim Scent Diffuser, which can make even the most modest of washrooms feel more like a spa.
</p>
</div>
<div class="bath-content">
<div class="bath-items">
<div class="bath-top">
<div class="bath-thum utd wow" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-01.jpg">
<span class="badge best">Best</span>
</div>
<p><ins>Basket</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-02.jpg">
</div>
<p><ins>Waffle Bathrobe Sky Blue</ins></p>
</div>
</div>
<div class="bath-down utd wow">
<div class="bath-thum" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-03.jpg">
<span class="badge new">New</span>
</div>
<p><ins>Chim Chim Scent Diffuser</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-08.jpg">
</div>
<p><ins>Colour Crate / Frotté Towel</ins></p>
</div>
<div class="bath-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bath-photo">
<img src="img/inspiration-bath-07.jpg">
</div>
<p><ins>Waffle Slippers / Giant Waffle Bath Towel</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
</div>
</section>
<!-- Section : inspiration-bed-collection -->
<section class="bed-collection tabs" id="tab3">
<div class="sofa-inner bath-inner bed-inner">
<!-- Heading -->
<div class="sofa-heading bath-heading bed-inner utd wow">
<h2>BEDROOM INSPIRATION</h2>
<hr class="bar">
</div>
<!-- bed-container-->
<div class="bath-content bed-content">
<div class="bath-items bed-items">
<div class="bath-top bed-top utd">
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-05.jpg">
<span class="badge best">Best</span>
</div>
<p><ins>Bias Quilt / Slit Table / Turn On Lamp</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-04.jpg">
<span class="badge new">New</span>
</div>
<p><ins>Pao Steel Pendant / Ellipse Tray / Tray Table</ins></p>
</div>
</div>
<div class="section-text utd wow">
<p>
A peaceful, productive day starts in the bedroom, so it’s the perfect place to invest some attention and care.</p>
<p>
Whether you’re looking for an elegant bedspread like Kite, Bias, or Megadot, a cozy bathrope to warm up on cold mornings, or any kind of accessory – from storage to table lamps – HAY has a little bit of everything you might need to make your bedroom the sanctuary it should be.
</p>
</div>
<div class="bath-down bed-down">
<div class="bath-thum bed-thum utd wow" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-07.jpg">
</div>
<p><ins>Matin Table Lamp / Duo Bed Linen / Tray Table </ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-09.jpg">
</div>
<p><ins>Knit</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-10.jpg">
</div>
<p><ins>Soft Coat Hanger</ins></p>
</div>
</div>
<div class="bath-down bed-down">
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.25s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-08.jpg">
</div>
<p><ins>Chim Chim Scent Diffuser / Tray Table</ins></p>
</div>
<div class="bath-thum bed-thum utd wow" data-wow-delay="0.5s" onclick="location.href='#none'">
<div class="bed-photo">
<img src="img/inspiration-bed-06.jpg">
</div>
<p><ins>Outline Cushion / Crinkle Bedspread</ins></p>
</div>
</div>
</div>
</div>
<div class="coll-btn utd wow">
<a href="#none" class="view-more">View more</a>
</div>
</div>
</section>
// inspiration tab menu
$('.sub-menu-item li').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
var tab = $(this).attr('data-alt')
$('.tabs').removeClass('active')
$('#' + tab).addClass('active')
});
답변 1
0
코딩웍스(Coding Works)
지식공유자
제이쿼리 플러그인을 사용하면 알 수 없는 충돌이 있을 수 있습니다.
만약 이런 경우가 생기면 원인을 찾아내는게 매우 어렵습니다.
탭메뉴 기능이 안되는지 체크하려고 했는데 CSS가 없어서 테스트 해볼수가 없네요. CSS 코드도 올려주세요~
박효정
질문자
/* ######### INSPIRATION ########## */
.inspiration-container {
position: relative;
}
/* Sub menu list */
.sub-menu {
width: 100%;
background-color: #f9f9f9;
}
.sub-menu-container {}
.sub-menu-item {
text-align: center;
list-style: none;
margin: 0;
}
.sub-menu-item li {
font-size: 20px;
display: inline-block;
text-transform: uppercase;
padding: 80px;
}
.sub-menu-item li a {
color: #000;
font-weight: 300;
position: relative;
padding-bottom: 8px;
}
.sub-menu-item li a:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 2px;
background: #000;
bottom: 0;
transition: 0.35s;
left: 50%;
transform: translateX(-50%);
}
.sub-menu-item li a:hover:after {
width: 100%;
}
.sub-menu-item li.active a:after {
width: 100%;
}
.tabs.active {
display: block;
}
/* ######### INSPIRATION / Section : sofa-collection ########## */
.sofa-collection {
display: none;
background-color: #f9f9f9;
}
.sofa-inner {
width: 90%;
margin: auto;
padding-top: 0;
padding-bottom: 100px;
}
.sofa-heading {
text-align: center;
}
.sofa-heading h2 {
font-size: 60px;
font-weight: bold;
margin: 0;
text-transform: uppercase;
}
.sofa-heading .bar {
display: inline-block;
height: 6px;
background: #2a3052;
margin: 30px 0;
border: none;
width: 50%;
}
.sofa-content {
overflow: hidden;
margin: 50px 0;
}
.sofa-content > div {
float: left;
width: 50%;
}
.sofa-left {}
.sofa-big {
width: 850px;
height: 720px;
position: relative;
margin: auto;
cursor: pointer;
}
.sofa-big:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
transition: 0.5s;
}
.sofa-big:hover:before {
background-color: rgba(0, 0, 0, 0.35);
}
.sofa-big img {
width: inherit;
height: inherit;
object-fit: cover;
}
.sofa-headline {
position: absolute;
width: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
.sofa-headline h3 {
font-size: 40px;
font-weight: 500;
}
.sofa-headline p {
line-height: 1.5em;
}
.inview {
display: block;
font-size: 14px;
margin: 30px 0 40px;
}
.find-dealer {
background: #000;
color: #fff;
font-size: 16px;
padding: 8px 20px;
border: 2px solid #fff;
}
.coll-btn .view-more {
display: block;
text-align: center;
margin: auto;
background: #2a3052;
}
.coll-btn .view-more:hover {
background: #9b392e;
}
.sofa-right {
padding-left: 50px;
}
.sofa-items-up {
margin-bottom: 50px;
}
.sofa-thum {
width: 500px;
height: 300px;
cursor: pointer;
}
.sofa-items-up > div,
.sofa-items-down > div {
display: inline-block;
}
.sofa-thum:hover img {
transform: scale(1.1);
}
.sofa-thum:first-child {
margin-right: 20px;
}
.sofa-thum:last-child {
width: 250px;
}
.sofa-items-down .sofa-thum:first-child {
width: 300px;
}
.sofa-items-down .sofa-thum:last-child {
width: 450px;
height: 300px;
}
.sofa-photo {
display: inline-block;
width: inherit;
height: inherit;
position: relative;
overflow: hidden;
}
.sofa-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
.sofa-photo span {}
.sofa-thum p {
margin-top: 0;
font-size: 16px;
text-align: center;
}
.badge {
position: absolute;
color: #fff;
top: 0;
left: 0;
font-size: 12px;
padding: 0 5px;
}
.badge.best {
background: #333;
}
.badge.new {
background: #9b392e;
}
/* Video */
.sofa-video {
margin-top: 200px;
text-align: center;
position: relative;
}
.sofa-video:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 60px;
left: 128px;
color: rgba(132, 132, 132, 0.6);
}
.section-text {
text-align: center;
padding: 160px;
margin-bottom: 80px;
}
.section-text h4 {
font-size: 30px;
font-weight: 500;
}
.section-text p {
line-height: 1.7em;
position: relative;
}
.section-text p:after {
content: ',,';
font-size: 400px;
position: absolute;
top: 100px;
right: -89px;
color: rgba(132, 132, 132, 0.6);
}
.section-text.second p:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 10px;
left: -100px;
color: rgba(132, 132, 132, 0.6);
}
/* ######### INSPIRATION / Section : bath-collection ########## */
.bath-collection {
display: none;
background-color: #f9f9f9;
}
.bath-video {
margin-top: 100px;
}
.bath-video:before {
display: none;
}
.bath-inner .section-text {
margin-top: 80px;
}
.bath-inner .section-text p:before {
content: ',,';
font-size: 400px;
position: absolute;
transform: rotate(180deg);
top: 10px;
left: -100px;
color: rgba(132, 132, 132, 0.6);
}
.bath-content {}
.bath-items {
overflow: hidden;
}
.bath-items > div {
text-align: center;
}
.bath-top {}
.bath-down {}
.bath-top > div,
.bath-down > div {
display: inline-block;
}
.bath-thum {
padding: 20px;
cursor: pointer;
}
.bath-thum:hover img {
transform: scale(1.1);
}
.bath-photo {
display: inline-block;
width: 100%;
height: 430px;
position: relative;
overflow: hidden;
}
.bath-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
.bath-inner .coll-btn {
margin-top: 50px;
}
/* ######### INSPIRATION / Section : bed-collection ########## */
.bed-collection {
display: none;
background-color: #f9f9f9;
}
.bed-content {
margin-top: 80px;
}
.bed-items {}
.bed-items .section-text p:after {
top: 0px;
}
.bed-items .section-text p:first-child {
margin-bottom: 50px;
}
.bed-items .section-text p:first-child:before,
.bed-items .section-text p:first-child:after {
display: none;
}
.bed-photo {
display: inline-block;
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.bed-photo img {
display: block;
width: inherit;
height: inherit;
transition: 0.5s;
}
박효정
질문자
$(function () {
// Trigger
$('.trigger').click(function () {
$(this).toggleClass('active')
$('.gnb').toggleClass('active')
})
$('.menu a').click(function () {
$('.gnb').removeClass('active')
$('.trigger').removeClass('active')
})
// Change CSS with Scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('header, .btn-top').addClass('active')
} else {
$('header, .btn-top').removeClass('active')
}
})
// Slick Slider - Home
$('.slideshow').slick({
infinite: true,
dots: false,
autoplay: true,
autoplaySpeed: 2000,
fade: true,
speed: 1000,
pauseOnHover: false
})
// TypeIt - Welcome
$('#typing').typeIt({
strings: [""],
speed: 120,
autoStart: true,
breakLines: false,
})
// Parallax Scroll - visual
$('.bg-holder').parallaxScroll({
friction: 0.2,
direction: "vertical"
});
// inspiration tab menu
$('.sub-menu-item li').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
var tab = $(this).attr('data-alt')
$('.tabs').removeClass('active')
$('#' + tab).addClass('active')
});
// Wow Scroll Reveal Animation
wow = new WOW({
boxClass: 'wow', // default
offset: 150, // default
mobile: true, // default
})
wow.init();
// Smooth Scrolling - inspiration
$('.sub-menu-item li').click(function(e){
$.scrollTo(this.hash || 500, 500)
})
});
$(function () {
// faq-accordion - contact
$('.faq-desc').eq(0).show()
$('.faq-title').click(function () {
$(this).next().stop().slideDown()
$(this).parent().siblings('.faq-item').children('.faq-desc').stop().slideUp()
$(this).parent().addClass('active')
$(this).parent().siblings('.faq-item').removeClass('active')
});
});