<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SvnHostDemo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.tab {
float:left;
width:150px;
height:30px;
text-align:center;
line-height:30px;
border-top:1px solid Pink;
border-left:1px solid Pink;
border-bottom:1px solid black;
cursor:pointer;
}
.div_1 {
width:907px;
border-right:1px solid Pink;
height:370px;
margin-top:30px;
margin-left:200px;
}
.div_2 {
width:907px;
height:340px;
float:left;
border-right:1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".tab").each(function (index) {
var t = "";
if ($(this).hasClass('cue') == true) {
$(this).css("border-right", "1px solid black");
$(this).css("border-left", "1px solid black");
$(this).css("border-top", "1px solid black");
$(this).css("border-bottom", "0px solid black");
t = index;
$(".div_2").each(function (ert) {
$(this).css("display", "none");
$(this).addClass('cue');
if (t == ert) {
$(this).css("display", "block");
$(this).removeClass('cue');
}
});
}
});
$(".tab").click(function () {
var t =$(".tab").index($(this))
$(".tab").each(function (index) {
if ($(this).hasClass('cue') == true) {
$(this).css("border-right", "0px solid Pink");
$(this).css("border-left", "1px solid Pink");
$(this).css("border-top", "1px solid Pink");
$(this).css("border-bottom", "1px solid black");
$(this).removeClass('cue');
$(".div_2").each(function (ert) {
if ($(this).hasClass('cue') == false) {
$(this).css("display", "none");
$(this).addClass('cue');
}
if (t == ert) {
$(this).css("display", "block");
$(this).removeClass('cue');
}
});
}
});
$(this).addClass('cue');
$(this).css("border-right", "1px solid black");
$(this).css("border-left", "1px solid black");
$(this).css("border-top", "1px solid black");
$(this).css("border-bottom", "0px solid black");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="div_1">
<div class="tab cue">111111111111</div>
<div class="tab">222222222222</div>
<div class="tab">333333333333</div>
<div class="tab">444444444444</div>
<div class="tab">555555555555</div>
<div class="tab">666666666666</div>
<div class="div_2">
1111111111111111111111111111111111111111111111111111111
</div>
<div class="div_2">
2222222222222222222222222222222222222222222222222222222
</div>
<div class="div_2">
333333333333333333333333333333333333333333333333333333333
</div>
<div class="div_2">
4444444444444444444444444444444444444444444444
</div>
<div class="div_2">
55555555555555555555555555555555555555555555555555555555555555
</div>
<div class="div_2">
66666666666666666666666666666666666666666666666666666666666666
</div>
</div>
</form>
</body>
</html>