csdn首页的那个新闻,blog,论坛,图书的tab签的做法,滑动门技术
2007-02-07 12:00
381 查看
问题内容:求助csdn首页的那个新闻,blog,论坛,图书的tab签的做法,滑动门技术
原讨论链接:http://community.csdn.net/expert/topicview1.asp?id=4805222
所属论坛:JavaScript 审核组:WEB开发
提问者:boylez 解决者:BlueDestiny
感谢:BlueDestiny
关键字:JavaScript Web 开发 tab 滑动门技术
答案:
谢谢,最好有代码示例
---------------------------------------------------------------
这不是很简单的效果吗?用CSS就可以做了,而且不含添加剂,网上很多的,下面就是其中一个
<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px;
padding:0 20px;
color:#333;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
color:#F30;
text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
color:#F30;
text-decoration:none;
}
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
display:none;
}
</style>
<div id="Whatever">
<ul class="TabBarLevel1" id="TabPage1">
<li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
<li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
<li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li>
<li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>
</ul>
<div id="cnt">
<div id="dTab1" class="HackBox">我为每一次的快乐而哭泣,我为每一次的悲伤而微笑。
</div>
<div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】
</div>
<div id="dTab3" class="HackBox">学习是件头疼的事,为了能活下去我不得不学习
</div>
<div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
</div>
</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){
var x = oItem.children(i);
x.className = "";
var y = x.getElementsByTagName('a');
y[0].style.color="#333333";
}
document.getElementById(tabid).className = "Selected";
var dvs=document.getElementById("cnt").getElementsByTagName("div");
for (var i=0;i<dvs.length;i++){
if (dvs[i].id==('d'+tabid))
dvs[i].style.display='block';
else
dvs[i].style.display='none';
}
}
</script>
原讨论链接:http://community.csdn.net/expert/topicview1.asp?id=4805222
所属论坛:JavaScript 审核组:WEB开发
提问者:boylez 解决者:BlueDestiny
感谢:BlueDestiny
关键字:JavaScript Web 开发 tab 滑动门技术
答案:
谢谢,最好有代码示例
---------------------------------------------------------------
这不是很简单的效果吗?用CSS就可以做了,而且不含添加剂,网上很多的,下面就是其中一个
<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px;
padding:0 20px;
color:#333;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
color:#F30;
text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
color:#F30;
text-decoration:none;
}
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
display:none;
}
</style>
<div id="Whatever">
<ul class="TabBarLevel1" id="TabPage1">
<li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
<li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
<li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li>
<li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>
</ul>
<div id="cnt">
<div id="dTab1" class="HackBox">我为每一次的快乐而哭泣,我为每一次的悲伤而微笑。
</div>
<div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】
</div>
<div id="dTab3" class="HackBox">学习是件头疼的事,为了能活下去我不得不学习
</div>
<div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
</div>
</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){
var x = oItem.children(i);
x.className = "";
var y = x.getElementsByTagName('a');
y[0].style.color="#333333";
}
document.getElementById(tabid).className = "Selected";
var dvs=document.getElementById("cnt").getElementsByTagName("div");
for (var i=0;i<dvs.length;i++){
if (dvs[i].id==('d'+tabid))
dvs[i].style.display='block';
else
dvs[i].style.display='none';
}
}
</script>
相关文章推荐
- 我Blog中登上CSDN首页的文章
- Blog、论坛和新闻中心的整合
- java如何判断char类型是否为空-CSDN论坛-CSDN.NET-中国最大的IT技术社区
- 第一次在CSDN上写blog。CSDN是个好地方,碰到技术问题在这里一般都可以找到答案。
- 上csdn 论坛首页了
- 数据挖掘和知识发现的技术、方法及应用 --------http://blog.csdn.net/gongfs/archive/2006/03/17/627244.aspx
- 注册csdn已经有两年的时间了,今天才开始正式启用自己的blog,纯技术的blog
- 技术英雄会【新闻】CSDN最有价值博客TOP10颁奖【图】【我在左边数第四个】
- CSDN 论坛招聘区是不是有潜规则?在Cnblog招个人试试...
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- node.js 获取csdn首页热点新闻
- csdn论坛技术区平均给分功能
- csdn 论坛技术区平均给分功能
- 好久没有更新CSDN上的Blog,说说现在我的技术历程吧。
- JAVA_WEB项目(结合Servlet+jsp+ckEditor编辑器+jquery easyui技术)实现新闻发布管理系统第四篇:前台首页,新闻分类(体育新闻,科技新闻等),新闻列表分页的实现
- Andriod 论坛,电子图书,技术网站
- 发文纪念我Blog中的文章再次登上CSDN首页
- php采集csdn首页新闻
- [VB.NET]csdn上的论坛树型结构是怎么实现的呢 ??用的是什么技术和控件啊?
- 重新开始在CSDN写技术Blog了