티스토리 뷰

jQuery

Tab / light box / back to top

정낭고 2023. 10. 10. 09:56

Tab (탭)

- 클래스 추가: 대상.addClass('클래스명');

- 클래스 제거: 대상.removeClass('클래스명');

- 클래스 추가 및 제거: 대상.toggleClass('클래스명');

- 클래스 찾기: 대상.hasClass('클래스명');

- attribute(요소)를 확인하는 방법: 대상.attr('속성명');

- attribute(요소)를 새값으로 바꾸는 방법: 대상.attr('속성명','새값');

 

▏jQuery 속성 활용

/*
tabMenu를 클릭하면 할 일
클릭된 그 요소의 속성명 href의 값을 변수 targetId에 저장
모든 링크에서 active를 제거하고, 클릭한 그 요소에 acitve 추가
모든 tabContent 보이지 않도록 한다
targetId값의 요소를 선택해서 보이도록 (display:block)
*/
let tabMenu = $('.tab-menu a');
let tabContent = $('#tab-content > div');

tabMenu.on('click',function(e){
    e.preventDefault();
    let targetId = $(this).attr('href');

    tabMenu.removeClass('active');
    $(this).addClass('active');
    
    //tabContent.css({display:'none'});
    //$(targetId).css({display:'block'});
    tabContent.hide();
    $(targetId).show();
})

tabMenu.eq(0).trigger('click');

 

▏index 활용

/*
탭메뉴를 클릭하면 몇번째 메뉴를 클릭했는지 확인
그 번호 번째 tabContent가 보이도록

tabMenu를 클릭하면 변수명 targetIdx에 그 요소의 index 번호 할당
console에서 확인
*/

let tabMenu = $('.tab-menu li');
let tabContent = $('#tab-content > div');

tabMenu.on('click',function(){
    let targetIdx = $(this).index();
    console.log(targetIdx);
    // tabContent.hide();
    // tabContent.eq(targetIdx).show();

    // tabMenu.children('a').removeClass('active');
    // $(this).find('a').addClass('active');

    /* 클릭한 그 요소에만 active를 추가하고 나머지에서 active 제거 */
    $(this).find('a').addClass('active');
    $(this).siblings().find('a').removeClass('active')

   /* html 클래스 active를 추가하고 css에서 display속성 바꾸기 */
    tabContent.removeClass('active');
    tabContent.eq(targetIdx).addClass('active');
})

 

▏jQuery 라이브러리 활용

라이브러리 참고 사이트: https://jqueryui.com/tabs/

$('.tab-wrapper').tabs({
    show: { duration: 500 },
    hide: { duration: 100 }
  });

 

ex) tab 클릭 시 할 일

<ul class="menu">
	<li><a href="">about</a></li>
	<li><a href="">services</a></li>
	<li><a href="">works</a></li>
	<li><a href="">location</a></li>
</ul>
<p>
	당신은 <span></span>번째 인덱스 메뉴를 클릭했습니다.
</p>
<div></div>
//메뉴를 클릭했을때 메뉴의 인덱스 번호가 span 태그사이에 출력되도록 합니다.
$('.menu li').click(function(e){
	e.preventDefault();
	let num = $(this).index();
	$('span').text(num);
})

// ()안이 글씨가 모두 출력
// $('div').text('<h2>test</h2>');
// html 태그로 인식되어 test만 출력
$('div').html('<h2>test</h2>');

 

light box

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Simple image Modal</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="gallery-container">
        <ul class="gallery">
            <li><a href="#" alt="Gallery image"><img src="images/img-01-thumb.jpg"
                        data-lightbox="images/img-01-large.jpg" alt="Gallery image"></a></li>
            <li><a href="#" alt="Gallery image"><img src="images/img-02-thumb.jpg"
                        data-lightbox="images/img-02-large.jpg" alt="Gallery image"></a></li>
            <li><a href="#" alt="Gallery image"><img src="images/img-03-thumb.jpg"
                        data-lightbox="images/img-03-large.jpg" lt="Gallery image"></a></li>
            <li><a href="#" alt="Gallery image"><img src="images/img-04-thumb.jpg"
                        data-lightbox="images/img-04-large.jpg" alt="Gallery image"></a></li>

        </ul>
    </div> <!-- end gallery-container -->

    <div id="lightbox-overlay">
        <img src="" alt="Lightbox image" title="Click anywhere to close" id="lightbox-image" />
    </div> <!-- end lightbox-overlay -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>
</html>
/* General styles */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    width:60%;
    margin:2rem auto;
}

.gallery li {
    float: left;
    width: 48%;
    margin: 1%;
}

.gallery li img {
    transition: opacity .3s ease-in-out;
}

.gallery li img:hover {
    opacity: .75;
}

#lightbox-overlay {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(29, 31, 33, .95);
    transition: opacity .3s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

#lightbox-image {
    max-height: 90%;
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
    max-width: 90%;    
    text-indent: -99999px;
}
let gallerylist = $('.gallery a'),
lightbox = $('#lightbox-overlay'),
lightboximg = lightbox.find('#lightbox-image');

/*
gallerylist를 클릭하면 할 일
클릭한 그 요소안의 img 속성명 data-lightbox의 값을 imgSrc 변수에 할당
lightboximg의 src의 값을 imgSrc으로 변경
lightbox에 클래스명 visible 추가

hint: $(this), attr, addClass
 */
gallerylist.click(function(){
    let imgSrc = $(this).find('img').attr('data-lightbox');
    lightboximg.attr('src',imgSrc);
    lightbox.addClass('visible');
})

/* lightbox를 클릭하면 lightbox가 보이지 않도록 한다. */
lightbox.click(function(){
    lightbox.removeClass('visible');
})

 

back to top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back to Top</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"
        integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <div class="wrapper">
        <h1>Back to Top Animation</h1>
        <main>
            <h2>Main content</h2>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
        </main>
    </div>
    <a href="#" id="go-top" title="Back to Top">
        <i class="fas fa-arrow-up"></i>
    </a>
</body>

</html>
@charset "UTF-8";

/* Base */
html { 
	font-size: 16px; 
	line-height: 1.5; 
}
.wrapper { 
	max-width: 960px; 
	width:85%;
	margin:0 auto; 
}
article{
	margin: 4rem auto;
}
/* GOTOP BTN */
#go-top {    
	width: 48px; 
	height: 48px;   
	position: fixed; 
	bottom: 48px; 
	right: 48px;
	line-height:48px;
	text-align:center; 	
	background-color:#444;
	color:#fff;
	opacity: 0;
	visibility: hidden;
	transition:opacity 0.5s;
}

#go-top.active{
	opacity: 1;
	visibility: visible;
}
$(function(){
    let goTop = $('#go-top');

/*
윈도우의 스크롤이 생기면 할 일
그 스크롤양이 300보다 크다면
goTop이 보인다.
아니라면 goTop이 안보인다.

hint: $(window), scroll, scrollTop()
*/

$(window).on('scroll',function(){
    let sct = $(this).scrollTop();
    if(sct > 300){
        goTop.addClass('active');
    } else {
        goTop.removeClass('active');
    }
})

/*
goTop을 클릭하면 할 일
링크의 기본 속성 막기
윈도우 스크롤양이 0으로 되는 과정이 보이도록
속도는 easeInCubic

hint: animate, scrollTop -> 0
 */
goTop.click(function(e){
    e.preventDefault();
    $('html,body').stop().animate({scrollTop:0},'easeInCubic');
});

});

 

 

 

 

 

'jQuery' 카테고리의 다른 글

fade / sticky / shrinking-nav-bar  (0) 2023.10.10
jQuery?  (0) 2023.10.10
animation 한 번만 작동하게 하기  (0) 2023.10.10
each 함수 / aside menu  (0) 2023.10.10
submenu(서브메뉴) / Loading animation bar  (0) 2023.10.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함