퍼블리싱 우선순위 2 메모리 - 탭 순서 변경, 카테고리 홈화면과 비슷하게

dev_bert
정이솔 3 years ago
parent 874309437f
commit dfed508113

@ -13,7 +13,8 @@
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="../../js/jquery.easypiechart.min.js"></script>
<link rel="stylesheet" href="../../css/swiper.min.css">
<script src="../../js/swiper.min.js"></script>
</head>
<body>
@ -30,6 +31,11 @@
<!-- 메모리 카테고리 -->
<ul class="memory_ca">
<li>
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
<li class="current">
<a href="../memory/memory_daily.html">
일간
@ -40,22 +46,51 @@
주간
</a>
</li>
<li>
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
</ul>
<!-- //메모리 카테고리 -->
<!-- 컬러 박스 -->
<div class="color_box">
<button type="button" class="m_color01"></button>
<button type="button" class="m_color02"></button>
<button type="button" class="m_color03"></button>
<button type="button" class="m_color04"></button>
<button type="button" class="m_color05"></button>
<button type="button" class="m_color06"></button>
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a style="background-color: #FF7C80"><span>모유</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FF9933"><span>젖병</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FFCC00"><span>홈메이드</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A4DE00"><span>시판</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #7FE1A7"><span>간식</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #84DCD2"><span>수면</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A1D3E3"><span>대소변</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #B5A0DC"><span>병원</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D09CE0"><span>체온</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #EB91C7"><span>생활</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #F38998"><span>성취</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D59A6D"><span>유축</span></a>
</div>
</div>
</div>
</div>
<!-- //컬러 박스 -->
@ -144,6 +179,31 @@
</nav>
<!-- //iyu_nav -->
<script>
// main_cont_kinds
$(".main_cont_kinds .swiper-slide a").click(function(e) {
e.stopPropagation();
if (!$(this).hasClass("on")) {
$(".main_cont_kinds li a.on").removeClass("on");
$(this).addClass("on");
}
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
}
});
</script>
</body>
</html>

@ -9,6 +9,8 @@
<link rel="shortcut icon" href="../../img/favicon.ico">
<link rel="stylesheet" href="../../css/style.css">
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="../../css/swiper.min.css">
<script src="../../js/swiper.min.js"></script>
</head>
<body>
@ -25,6 +27,11 @@
<!-- 메모리 카테고리 -->
<ul class="memory_ca">
<li class="current">
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
<li>
<a href="../memory/memory_daily.html">
일간
@ -35,22 +42,51 @@
주간
</a>
</li>
<li class="current">
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
</ul>
<!-- //메모리 카테고리 -->
<!-- 컬러 박스 -->
<div class="color_box">
<button type="button" class="m_color01"></button>
<button type="button" class="m_color02"></button>
<button type="button" class="m_color03"></button>
<button type="button" class="m_color04"></button>
<button type="button" class="m_color05"></button>
<button type="button" class="m_color06"></button>
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a style="background-color: #FF7C80"><span>모유</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FF9933"><span>젖병</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FFCC00"><span>홈메이드</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A4DE00"><span>시판</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #7FE1A7"><span>간식</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #84DCD2"><span>수면</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A1D3E3"><span>대소변</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #B5A0DC"><span>병원</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D09CE0"><span>체온</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #EB91C7"><span>생활</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #F38998"><span>성취</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D59A6D"><span>유축</span></a>
</div>
</div>
</div>
</div>
<!-- //컬러 박스 -->
@ -241,6 +277,31 @@
</nav>
<!-- //iyu_nav -->
<script>
// main_cont_kinds
$(".main_cont_kinds .swiper-slide a").click(function(e) {
e.stopPropagation();
if (!$(this).hasClass("on")) {
$(".main_cont_kinds li a.on").removeClass("on");
$(this).addClass("on");
}
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
}
});
</script>
</body>
</html>

@ -9,6 +9,8 @@
<link rel="shortcut icon" href="../../img/favicon.ico">
<link rel="stylesheet" href="../../css/style.css">
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="../../css/swiper.min.css">
<script src="../../js/swiper.min.js"></script>
</head>
<body>
@ -25,6 +27,11 @@
<!-- 메모리 카테고리 -->
<ul class="memory_ca">
<li>
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
<li>
<a href="../memory/memory_daily.html">
일간
@ -35,22 +42,51 @@
주간
</a>
</li>
<li>
<a href="../memory/memory_timeline.html">
타임라인
</a>
</li>
</ul>
<!-- //메모리 카테고리 -->
<!-- 컬러 박스 -->
<div class="color_box">
<button type="button" class="m_color01"></button>
<button type="button" class="m_color02"></button>
<button type="button" class="m_color03"></button>
<button type="button" class="m_color04"></button>
<button type="button" class="m_color05"></button>
<button type="button" class="m_color06"></button>
<div class="main_cont_kinds active" style="border: none">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a style="background-color: #FF7C80"><span>모유</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FF9933"><span>젖병</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #FFCC00"><span>홈메이드</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A4DE00"><span>시판</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #7FE1A7"><span>간식</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #84DCD2"><span>수면</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #A1D3E3"><span>대소변</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #B5A0DC"><span>병원</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D09CE0"><span>체온</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #EB91C7"><span>생활</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #F38998"><span>성취</span></a>
</div>
<div class="swiper-slide">
<a style="background-color: #D59A6D"><span>유축</span></a>
</div>
</div>
</div>
</div>
<!-- //컬러 박스 -->
@ -174,6 +210,31 @@
</nav>
<!-- //iyu_nav -->
<script>
// main_cont_kinds
$(".main_cont_kinds .swiper-slide a").click(function(e) {
e.stopPropagation();
if (!$(this).hasClass("on")) {
$(".main_cont_kinds li a.on").removeClass("on");
$(this).addClass("on");
}
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true
}
});
</script>
</body>
</html>

Loading…
Cancel
Save