利用Jquery实现tab效果

来源：互联网发布：渲染大师软件编辑：程序博客网时间：2024/05/29 14:56

老是看到网页中的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>