[jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게

 

셀렉트 박스에서 선택 시

해당 내용으로 이동하게 하는 제이쿼리 소스 입니다.

별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다.

 

적용 이미지

 

위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다.

탭과 유사한 기능이라고 보시면 됩니다.

 

 

HTML 

Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box

<div class="inner">
        <div class="selectWrap">
            <select onchange="select(this)" style="display: none;">
                <option value="" hidden="" selected="">1. Step1 : Lorem Ipsum is simply dummy text</option>
                <option value="chapter01">Chapter 1 : Lorem Ipsum is simply dummy text</option>
                <option value="chapter02">Chapter 2 : Select another text</option>
                <option value="chapter03">Chapter 3 : Selet third text box</option>
            </select>
        </div>
        <div class="contents">
            <div class="selectbox_con" id="boxchapter01">
                <div class="imgwrap"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FddHZkD%2FbtsE8C0KPLi%2FSSHeY2XYZ0Kc0jn8GxSSI1%2Fimg.png" alt=""></div>
                <h2>1. Step1 : Lorem Ipsum is simply dummy text</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div class="selectbox_con" id="boxchapter02" style="display: none;">
                <div class="imgwrap"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvQ2My%2FbtsFclpxBQm%2F4ufw4vbPmKkk2KR6kbU0ZK%2Fimg.png" alt=""></div>
                <h2>2. Step2 : Select another text</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div class="selectbox_con" id="boxchapter03" style="display: none;">
                <div class="imgwrap"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnnGbg%2FbtsE9ExfCAp%2FtA4ecCkwpyOQFcweHxCb7K%2Fimg.png" alt=""></div>
                <h2>3. Step3 : Selet third text box</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </div>

 

2. Step2 : Select another text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

3. Step3 : Selet third text box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

img{
  width: 100%;
}
.inner{
  padding:50px;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -1px;
}
.selectWrap select {
  display: block !important;
  height: 40px;
  border: 1px solid #ddd;
  padding: 0 10px;
  width: 100%;
}
.selectWrap {
  padding-bottom: 100px;
}
.selectbox_con h2 {
  margin-bottom: 20px;
  font-size: 28px;
  padding-top: 20px;
  font-weight: bold;
}
.selectbox_con p {
  font-size: 16px;
}
.imgwrap {
  width: 50%;
  margin: 0 auto;
  margin-bottom: 50px;
}

jQuery

function select(t) {
    $(".contents .selectbox_con").css("display", "none");
    $("#box" + t.value).css("display", "block");
}

 

셀렉트 박스에서 다른 내용으로 이동해 보세요! 😀