>  기사  >  웹 프론트엔드  >  간단한 탭 상자 예제 공유의 jQuery 구현

간단한 탭 상자 예제 공유의 jQuery 구현

小云云
小云云원래의
2017-12-30 14:50:361047검색

이 기사에서는 주로 jQuery를 사용하여 간단한 탭 상자를 구현하는 예제를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집기를 따라가며 살펴보겠습니다. jQuery를 사용하여 간단한 탭 상자를 더 잘 구현하는 데 도움이 되기를 바랍니다.

html 코드

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>实现简单的tab框</title>
 <link rel="stylesheet" href="css/tabDemo.css" rel="external nofollow" >
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/tabDemo.js"></script>
</head>
<body>
 <ul class="main">
 <li class="style1">休闲装</li>
 <li>名媛</li>
 <li>运动服</li>
 </ul>
 <ul class="sublevel">
 <li class="style2">女装 男装 童装</li>
 <li>甜美风 文艺风</li>
 <li>运动男 运动女</li>
 </ul>
</body>
</html>

css code

* {
 margin: 0;
 padding: 0px;
}
ul {
 width: 300px;
 margin: 10px auto;
}
ul li {
 list-style: none;
}
.main li {
 text-align: center;
 float: left;
 padding: 5px;
 margin-left: 10px;
 width: 80px;
 cursor: pointer;
 background-color: #f3f2e7;
}
.main .style1 {
 width: 50px;
 font-weight: bold;
 background-color: #f3f2e7;
 border: 1px solid #837979;
 border-bottom: 0;
 z-index: 100;
 position: relative;
}
.sublevel {
 width: 260px;
 height: 80px;
 padding: 19px;
 background-color: #f3f2e7;
 clear: left;
 border: 1px solid #837979;
 position:relative;
 top: -1px;
}
.sublevel li{
 display: none;
}
.sublevel .style1{
 display: block;
}

jquery code

$(function () {
 //页面打开时 呈现的效果
 $(".sublevel li:eq(0)").show();
 //each遍历输出
 $(".main li").each(function(index) {
  //click 点击
  $(this).click(function() {
    //addClass()增加当前样式      removeClass()移除除当前点击之外的同级样式
   $(this).addClass("main style1").siblings().removeClass("style1");
   $(".sublevel li:eq("+index+")").show().siblings().hide();
  })
 })
})

관련 권장 사항:

jQuery 플러그인 DataTables 페이징 개발 기술 공유

jQuery UI와 유사하게 v-선택 가능한 사용자 정의 Vue 명령에 대한 자세한 설명 선택 가능

php는 탭으로 구분된 파일 읽기 및 쓰기를 구현합니다

위 내용은 간단한 탭 상자 예제 공유의 jQuery 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.