利用Jquery实现tab效果

最新推荐文章于 2023-07-31 19:07:28 发布

leizhanglzcy

最新推荐文章于 2023-07-31 19:07:28 发布

阅读量259

点赞数

分类专栏： wen页面文章标签： jquery function div class html java

本文链接：https://blog.csdn.net/leizhanglzcy/article/details/7788911

版权

wen页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

老是看到网页中的Tab页，偶也想做个，就利用空闲时间研究了下下，代码如下：(如有不足请包涵)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
ul,li{
  list-style-type: none;
  margin: 0px;
  padding:0px;
}
li{
  background-color: gray;
  width:80px;
  line-height:40px;
  vertical-align:middle;
  text-align:center;
  float: left;
  margin-right:2px;
  border:1px solid white;
  cursor: pointer;
}
.label{
  margin-bottom: 0px;
  background-color: green;
  border:1px solid green;
}
div{
  clear: both;
  width:400px;
  height:100px;
  background-color: green;
  display: none;
}
.innin{
  display: block;
}
ul{
  clear: both;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $("li").each(function(index){
   node=$(this);
   node.mouseover(function(){
    $("div").removeClass("innin");
    $("div").eq(index).addClass("innin");
    $("li").removeClass("label");
    $("li").eq(index).addClass("label");
   });

  });
});
</script>
</head>
<body>

  <ul>
   <li class="label">label1</li>
   <li>label2</li>
   <li>label3</li>
  </ul>

<div class="innin">innerText1</div>
<div>innerText2</div>
<div>innerText3</div>
</body>
</html>

leizhanglzcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Jquery实现tab效果

老是看到网页中的Tab页，偶也想做个，就利用空闲时间研究了下下，代码如下：(如有不足请包涵) pageEncoding="ISO-8859-1"%>http://www.w3.org/TR/html4/loose.dtd">Insert title here ul,li{ list-style-type: none; margin: 0px;
复制链接

扫一扫