一个经典的选项卡代码

特点：渐变背景；代码简单；
效果图：

<style>
body
{
    width: 700px;
    margin: 100px auto 0 auto;
    font-family: Arial, Helvetica;
    font-size: small;
	background: #444;
}

/* ------------------------------------------------- */

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a{
  position: relative;
  background: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: -ms-linear-gradient(top, #fff, #ddd);
  background-image: -o-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}

#tabs a:focus{
  outline: 0;
}

#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: -ms-linear-gradient(top, #fff, #ddd);
  background-image: -o-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-transform: skew(10deg);
  -moz-transform: skew(10deg);
  -ms-transform: skew(10deg);
  -o-transform: skew(10deg);
  transform: skew(10deg);
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;  
}

#tabs #current a{
  background: #fff;
  z-index: 3;
}

#tabs #current a::after{
  background: #fff;
  z-index: 3;
}

/* ------------------------------------------------- */

#content
{
    background: #fff;
    padding: 2em;
	height: 220px;
	position: relative;
	z-index: 2;	
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    -moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#content h2, #content h3, #content p
{
    margin: 0 0 15px 0;
}

/* ------------------------------------------------- */

#about
{
    color: #999;
}

#about a
{
    color: #eee;
}

</style>

<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">
		内容一
    </div>
    <div id="tab2">
		内容二
    </div>
    <div id="tab3">
		内容三
    </div>
    <div id="tab4">
		内容四
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<style>

body

{

width: 700px;

margin: 100px auto 0 auto;

font-family: Arial, Helvetica;

font-size: small;

background: #444;

}

/* ------------------------------------------------- */

#tabs{

overflow: hidden;

width: 100%;

margin: 0;

padding: 0;

list-style: none;

}

#tabs li{

float: left;

margin: 0 .5em 0 0;

}

#tabs a{

position: relative;

background: #ddd;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

padding: .7em 3.5em;

float: left;

text-decoration: none;

color: #444;

text-shadow: 0 1px 0 rgba(255,255,255,.8);

-webkit-border-radius: 5px 0 0 0;

-moz-border-radius: 5px 0 0 0;

border-radius: 5px 0 0 0;

-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);

-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);

box-shadow: 0 2px 2px rgba(0,0,0,.4);

}

#tabs a:hover,

#tabs a:hover::after,

#tabs a:focus,

#tabs a:focus::after{

background: #fff;

}

#tabs a:focus{

outline: 0;

}

#tabs a::after{

content:'';

position:absolute;

z-index: 1;

top: 0;

right: -.5em;

bottom: 0;

width: 1em;

background: #ddd;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);

-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);

box-shadow: 2px 2px 2px rgba(0,0,0,.4);

-webkit-transform: skew(10deg);

-moz-transform: skew(10deg);

-ms-transform: skew(10deg);

-o-transform: skew(10deg);

transform: skew(10deg);

-webkit-border-radius: 0 5px 0 0;

-moz-border-radius: 0 5px 0 0;

border-radius: 0 5px 0 0;

}

#tabs #current a{

background: #fff;

z-index: 3;

}

#tabs #current a::after{

background: #fff;

z-index: 3;

}

/* ------------------------------------------------- */

#content

{

background: #fff;

padding: 2em;

height: 220px;

position: relative;

z-index: 2;

-moz-border-radius: 0 5px 5px 5px;

-webkit-border-radius: 0 5px 5px 5px;

border-radius: 0 5px 5px 5px;

-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

}

#content h2, #content h3, #content p

{

margin: 0 0 15px 0;

}

/* ------------------------------------------------- */

#about

{

color: #999;

}

#about a

{

color: #eee;

}

</style>

<li><a href="#" name="tab3">Three</a></li>

</ul>

内容一

</div>

内容二

</div>

内容三

</div>

内容四

</div>

$(document).ready(function() {

$("#content div").hide(); // Initially hide all content

$("#tabs li:first").attr("id","current"); // Activate first tab

$("#content div:first").fadeIn(); // Show first tab content

$('#tabs a').click(function(e) {

e.preventDefault();

if ($(this).closest("li").attr("id") == "current"){ //detection for current tab

return

}

else{

$("#content div").hide(); //Hide all content

$("#tabs li").attr("id",""); //Reset id's

$(this).parent().attr("id","current"); // Activate this

$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab

}

});

</script>

宸木