前台: <ul class="tabs">
<li><a href="#" onFocus="this.blur()">生活技能</a></li>
<li><a href="#" onFocus="this.blur()">健康养生</a></li>
<li><a href="#" onFocus="this.blur()">英语教程</a></li>
</ul>
<div class="panes">
<div>
tab1内容
</div>
<div>
tab2内容
</div>
<div>
tab3内容
</div>
</div>
<script>
$(function () {
$("ul.tabs").tabs("div.panes > div");
});
</script>CSS代码:/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:lid #666;
height:23px;
width:219px;
}/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
display:block;
}/* link inside the tab. uses a background image */
ul.tabs a {
background: url(../images/tab.gif);
font-size:12px;
display:block;
height: 23px;
line-height:23px;
width: 73px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:0px;
}
ul.tabs a:active {
outline:none;
}
ul.tabs a:hover {
color:red;
}ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background:url(../images/tab_1.gif);
cursor:default !important;
color:red !important;
}
还有一个就是jquery的脚本。目前的效果是需要点击tab2.tab3才能切换,如何修改为鼠标经过就自动切换,据说可以在css写个display:block就可以实现,求高手解答?????
<li><a href="#" onFocus="this.blur()">生活技能</a></li>
<li><a href="#" onFocus="this.blur()">健康养生</a></li>
<li><a href="#" onFocus="this.blur()">英语教程</a></li>
</ul>
<div class="panes">
<div>
tab1内容
</div>
<div>
tab2内容
</div>
<div>
tab3内容
</div>
</div>
<script>
$(function () {
$("ul.tabs").tabs("div.panes > div");
});
</script>CSS代码:/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:lid #666;
height:23px;
width:219px;
}/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
display:block;
}/* link inside the tab. uses a background image */
ul.tabs a {
background: url(../images/tab.gif);
font-size:12px;
display:block;
height: 23px;
line-height:23px;
width: 73px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:0px;
}
ul.tabs a:active {
outline:none;
}
ul.tabs a:hover {
color:red;
}ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background:url(../images/tab_1.gif);
cursor:default !important;
color:red !important;
}
还有一个就是jquery的脚本。目前的效果是需要点击tab2.tab3才能切换,如何修改为鼠标经过就自动切换,据说可以在css写个display:block就可以实现,求高手解答?????
function(){
$(this).addClass("over"); //鼠标经过添加hover样式
},function(){
$(this).removeClass("over"); //鼠标离开移除hover样式
});
.panes {display:none}
li:hover > div { display:block}