CSS+DIV+Javascript制作滑动门菜单技术

来源:网络整理 责任编辑:栏目编辑 发表时间:2013-07-02 04:16 点击:

<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
 list-style:none;
 margin:0;
 padding:0;
 height:29px;
 background-image:url(http://www.webjx.com/upfiles/20060409/20060409082237_tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
 float:left;
 padding:0;
 height:29px;
 margin-right:1px;
 background:url(http://www.webjx.com/upfiles/20060409/20060409082248_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://www.webjx.com/upfiles/20060409/20060409082257_tabbar_level1_slice_right_bk.gif) right top no-repeat;
 white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
 background:url(http://www.webjx.com/upfiles/20060409/20060409082312_tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
 background:url(http://www.webjx.com/upfiles/20060409/20060409082323_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');">出价记录</a></li>
  <li  id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li>
 </ul>
 <div id="cnt">
 <div id="dTab1" class="HackBox">代码如下:
                <!--这里放入信息-->
                   哈哈哈哈1
 </div>
 <div id="dTab2" class="HackBox" style="display:block">代码如下:
                <!--这里放入信息-->
                   哈哈哈哈2
 </div>
 <div id="dTab3" class="HackBox">代码如下:
                <!--这里放入信息-->
                   哈哈哈哈3
 </div>
 <div id="dTab4" class="Ha

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • 扎实基础 9则css网页制作技巧
    • CSS设计符合Web标准的网页表单的几个技巧
    • 技巧:css星级效果总结
    • 用CSS建设网站的实例(9)
    • 提高网站性能:JavaScript+CSS优化的建议(3)
    • CSS制作网页实例:用CSS控制li标记样式
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1