您的位置：首页 > Web前端 > JQuery

Div+CSS+JQuery轻松实现选项卡"选项卡"

2015-07-23 10:36 676 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script>

<style type="text/css">

body,div,ul{ padding:0; margin:0;}

#container{width:800px; margin:50px;}

.tab{ padding:0; margin:0; }

.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}

.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }

.content div{ border-top:0px; height:60px;}

.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black;

border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}

.tab_current{ text-decoration:underline;}

</style>

<script language="javascript" type="text/javascript">

$(

function() {

$(".content div:gt(0)").hide();

$(".tab li").css("cursor", "pointer");

$(".tab li").hover(function() {

$(this).addClass("tab_current");

}, function() {

$(this).removeClass("tab_current");

}).click(

function() {

$(this).addClass("tab_selected").siblings().removeClass("tab_selected");

$(".content div").eq($(this).index()).siblings().hide().end().show();

}

)

}

);

</script>

</head>

<body>

<div id="container">

<div class="tab">

<ul>

<li class="tab_selected">选项卡A</li>

<li>选项卡B</li>

<li>选项卡C</li>

</ul>

</div>

<div class="content">

<div>内容一</div>

<div>内容二</div>

<div>内容三</div>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Div+CSS+JQuery轻松实现选项卡&quot;选项卡&quot;

Div+CSS+JQuery轻松实现选项卡"选项卡"