关于tab标签样式问题

[weixin_40766456]

本人不会tab标签，在网上找了特效，却改变后难达到理想的效果，点击前图片与点击后图片相同，按理说想做不同的，还有一条下边距线，想短一些然后居中，这两样却怎么也也做不到，谁能帮帮我，感激不尽！第一次发帖，不会上传图片，想做的是一个竖向的tab标签，就是左边一点右边就变的那种，每一栏上是图片加文字，其他样式都做出来了，就剩两样就完美了。听说要改变js，我一点都不会...小图片可以随便找点什么代替，或者加我，我给你发文件夹，不知道表达是否够清晰，真的挺急的，谢谢！
html:
<div class="tabshow">
<div class="tabTagBox">
<ul class="tabTagList">
<ul class="tabTagList">
<li id="tag01" class="current" >
<img src="images/cbl1_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏1</span>
</li>
<li id="tag02">
<img src="images/cbl2_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏2</span>
</li>
<li id="tag03">
<img src="images/cbl3_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏3</span>
</li>
<li id="tag04">
<img src="images/cbl4_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏4</span>
</li>
<li id="tag05">
<img src="images/cbl5_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏5</span>
</li>
<li id="tag06">
<img src="images/cbl6_pre.png" class="xiaotu"/>
<span class="cebianlanzi">标签栏6</span>
</li>
</ul>
</ul>
</div>
<div class="tabcon">1</div>
<div class="tabcon hide">2</div>
<div class="tabcon hide">3</div>
<div class="tabcon hide">4</div>
<div class="tabcon hide">5</div>
<div class="tabcon hide">6</div>
<div class="tabcon">1默认在第一页显示</div>
</div>

css：
* {
margin:0;
padding:0;
list-style-type:none;
}
a, img {
border:0;
}
body {
/*font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";*/
}
/* tabshow */
.tabshow {
width:1200px;
height:422px;
position:relative;
margin:0 auto;
}
.tabshow .hide {
display:none;
}
.tabshow .udbtn, .tabshow .tabTagBox li {
}
.tabshow .udbtn {
display:block;
width:194px;
height:35px;
line-height:999em;
overflow:hidden;
}
.tabshow .uPrev {
background-position:0 -580px;
}
.tabshow .dNext {
background-position:0 -615px;
}
.tabshow .tabTagBox {/*调整侧边栏背景*/
height:365px;
width:200px;
overflow:hidden;
position:relative;
z-index:9;
margin:2px 0;
}
.tabshow .tabTagBox .tabTagList {
position:absolute;
left:0;
height:999em;
}
.tabshow .tabTagBox li {
float:left;
width:193px;
height:60px;
overflow:hidden;
cursor:pointer;
}
.tabshow .tabTagBox li.current {
width:194px;
}
.tabshow .tabTagBox li#tag01 {
background-position:-194px 0;
}
.tabshow .tabTagBox li#tag01.current {
background-position:0 0;
}
.tabshow .tabTagBox li#tag02 {
background-position:-194px -58px;
}
.tabshow .tabTagBox li#tag02.current {
background-position:0 -58px;
}
.tabshow .tabTagBox li#tag03 {
background-position:-194px -116px;
}
.tabshow .tabTagBox li#tag03.current {
background-position:0 -116px;
}
.tabshow .tabTagBox li#tag04 {
background-position:-194px -174px;
}
.tabshow .tabTagBox li#tag04.current {
background-position:0 -174px;
}
.tabshow .tabTagBox li#tag05 {
background-position:-194px -232px;
}
.tabshow .tabTagBox li#tag05.current {
background-position:0 -232px;
}
.tabshow .tabTagBox li#tag06 {
background-position:-194px -290px;
}
.tabshow .tabTagBox li#tag06.current {
background-position:0 -290px;
}
.tabshow .tabTagBox li#tag07 {
background-position:-194px -348px;
}
.tabshow .tabTagBox li#tag07.current {
background-position:0 -348px;
}
.tabshow .tabTagBox li#tag08 {
background-position:-194px -406px;
}
.tabshow .tabTagBox li#tag08.current {
background-position:0 -406px;
}
.tabshow .tabTagBox li#tag09 {
background-position:-194px -464px;
}
.tabshow .tabTagBox li#tag09.current {
background-position:0 -464px;
}
.tabshow .tabTagBox li#tag10 {
background-position:-194px -522px;
}
.tabshow .tabTagBox li#tag10.current {
background-position:0 -522px;
}
.tabshow .tabcon {
position:absolute;
top:0;
right:0;
z-index:1;
border:solid 1px #C00F15;
background:#F5F5F5;
height:420px;
width:990px;
overflow:hidden;
}
.current{/* 选中之后的样式 */
background: #fff;height: 45px;padding-left: 20px;line-height: 60px;
}
.current .cebianlanzi{
color: #f1573f;font-size: 16px;margin-left: 10px;
}
.xiaotu{vertical-align: middle;}
.cebianlanzi{color: white;font-size: 16px;margin-left: 10px;}
/* 没选中的样式自己定义 */
.tabTagList ul{background-color: hotpink;}
.tabTagList ul li{padding-left: 10px;border-bottom: 1px solid white;line-height: 60px;}

JS:
$(function(){
$("img[original]").lazyload({ placeholder:"http://www.lanrenzhijia.com/images/color3.gif" });
});
function lazyloadForPart(container){
container.find('img').each(function(){
var original = $(this).attr("original");
if (original) {
$(this).attr('src', original).removeAttr('original');
}
});
}
$(function(){
var navBox = $('.tabTagBox'), navList = $('.tabTagList'), navs = navList.children('li'), upBtn = $('.uPrev'), downBtn = $('.dNext'), contentBoxs = $('.tabcon');
var opts = {
moveH: 58,
moveSpeed: 200,
curMoveH: 0,
curSumH: 0,
curNavIndex: 0
}
opts.curSumH = (opts.moveH * navs.size()) - navBox.height();

var navToContentBox = function () {
navs.removeClass('current');
contentBoxs.hide().eq(opts.curNavIndex).show();
}
var navMove = function () {

var _arg = arguments.length > 0 ? arguments[0] : '';

navToContentBox();
navs.eq(opts.curNavIndex).addClass('current');
navList.animate({ top: opts.curMoveH + 'px' }, opts.moveSpeed);
lazyloadForPart(contentBoxs);
}

upBtn.click(function () {
navMove('down');
});

downBtn.click(function () {
navMove('up');
});

navs.click(function () {
opts.curNavIndex = $(this).index();
navToContentBox();
$(this).addClass('current');
lazyloadForPart(contentBoxs);
});
});

[浪子回头8]

这个不难啊，加我Q 2814817969