ํญ ๋ฉ๋ด ์ฝํ
์ธ - ์คํ์ผ 02(์ค์ ์ ์) with jQuery scss๋ก๋ง๋๋๋ฐ
๋ง์ํ์ ๋๋ก scss์์ .active๋ฅผ ๋ฃ์๋๋ฐ๋ ์ ์ฉ์ด ์๋ผ์,,๋๋์ฒด ๋ฌด์์ด ๋ฌธ์ ์ธ์ง ๋ชจ๋ฅด๊ฒ ๋ค์ ๋
ผ๋ฆฌ์ ์ผ๋ก ๋ดค์๋ .active๋ฅผ html์์ btn๊ณผ tabs ๋ฐ์ ๋ฃ์์๋ ์๋์ ํด์ผ ํ๋๋ฐ ์ ์๋๋์ง ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค ,, ๋ค๋ฅธ ๋ถ๋ถ์ ๋ค ์๋์ ํ๋๋ฐ ๋ง์ด์์ ใ
ใ
section{ width: 800px; .tab-inner{ margin-top: 30px; .btn{ list-style: none; padding: 0; margin: 0; overflow: hidden; li{ float: left; // border: 1px solid #000; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.3s; &:last-child{ width: 170px; border-right: none; } &:hover{ background-color: #fff; border-top: 2px solid crimson; } .active{ background-color: #fff; border-top: 2px solid crimson; } } } .tabs{ div{ background-color: #fff; padding: 20px; box-sizing: border-box; height: 200px; display: none; .active{ display: block; } } } } }