求救-如何这种菜单效果

xmutbbs1 2010-05-01 01:32:19



当鼠标移到专栏时 下面显示专栏的内容
当鼠标移到推荐时 下面显示推荐的内容。。。

...全文
103 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
mzgwh198857 2010-05-02
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>经典的淡蓝色选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{
padding:0;margin:0;
font-size:12px;
}
#main{
margin:20px;
}
ul{
width:600px;
}
#tab li{
list-style:none;
float:left;
text-align:center;
padding:0;
}
#tab a{
display:block;
text-decoration:none;
width:94px;
line-height:24px;
}
#cont{
clear:both;
border:1px solid blue;
border-top:0;
width:562px!important;
width:562px;
height:190px;
overflow-y:hidden;
}
.common{
margin:5px;
}
.common li{
list-style:none;
padding-left:14px!important;
padding-left:0;
padding-top:4px;
}
.common li a{
text-decoration:none;
}
.common li a:hover{
color:red;
}
.on{
background:url(/html/UploadPic/2010-1/20101613513817.gif) no-repeat left bottom;
}
.off{
background:url(/html/UploadPic/2010-1/20101613513639.gif) no-repeat left bottom;
}
</style>
<script language="javascript">
function $(ID){
return document.getElementById(ID)
}
function showTab(ID){
for(var i=1;i<7;i++){
if(ID==i){
$('tab'+i).blur();
$("tab"+i).className="on";
$("cont"+i).style.display="block";
}else{
$("tab"+i).className="off";
$("cont"+i).style.display="none";
}
}
return false;
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="main">
<div id="tab">
<ul>
<li><a href="javascript:void(0)" id="tab1" class="on" onclick="showTab('1')">C#源代码</a></li>
<li><a href="javascript:void(0)" id="tab2" class="off" onclick="showTab('2')">VB源代码</a></li>
<li><a href="javascript:void(0)" id="tab3" class="off" onclick="showTab('3')">VC源代码</a></li>
<li><a href="javascript:void(0)" id="tab4" class="off" onclick="showTab('4')">JQUERY</a></li>
<li><a href="javascript:void(0)" id="tab5" class="off" onclick="showTab('5')">Delphi</a></li>
<li><a href="javascript:void(0)" id="tab6" class="off" onclick="showTab('6')">JAVA源代码</a></li>
</ul>
</div>
<div id="cont">
<div id="cont1" class="common" style="display:block;">
<li><a href="#" target="_blank">30多个C#基础学习实例</a></li>
</div>
<div style="display:none;" id="cont2" class="common">
<li><a href="#" target="_blank">C#图片/相册管理程序代码</a></li>
</div>
<div style="display:none;" id="cont3" class="common">
<li><a href="#" target="_blank">VB仿Photoshop曲线调整图像亮度源程序</a></li>
</div>
<div style="display:none;" id="cont4" class="common">
<li><a href="#" target="_blank">VB仿RealonePlayer播放器的窗体界面</a></li>
</div>
<div style="display:none;" id="cont5" class="common">
<li><a href="#" target="_blank">30多个C#基础学习实例</a></li>
</div>
<div style="display:none;" id="cont6" class="common">
<li><a href="#" target="_blank">Farbtastic jQuery圆形网页取色插件</a></li>
</div>
</div>
</div>
</body>
</html>
在网上收选项卡，就会明白。
passself 2010-05-01
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

<style>

 *{ margin:0; padding:0;}

 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

 .tab { width:240px;margin:50px;}

 .tab_menu { clear:both;}

 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}

 .tab_menu li.hover { background:#DFDFDF;}

 .tab_menu li.selected { color:#FFF; background:#6D84B4;}

 .tab_box { clear:both; border:1px solid #898989; height:100px;}

 .hide{display:none}

</style>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript" >

//<![CDATA[

	$(function(){

	    var $div_li =$("div.tab_menu ul li");

	    $div_li.click(function(){

			$(this).addClass("selected")            //当前<li>元素高亮

				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮

            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。

			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 

					.eq(index).show()   //显示 <li>元素对应的<div>元素

					.siblings().hide(); //隐藏其它几个同辈的<div>元素

		}).hover(function(){

			$(this).addClass("hover");

		},function(){

			$(this).removeClass("hover");

		})

	})

//]]>

</script>

</head>

<body>



<div class="tab">

	<div class="tab_menu">

		<ul>

			<li class="selected">时事</li>

			<li>体育</li>

			<li>娱乐</li>

		</ul>

	</div>

	<div class="tab_box"> 

		 <div>时事</div>

		 <div class="hide">体育</div>

		 <div class="hide">娱乐</div>

	</div>

</div>



</body>

</html>
passself 2010-05-01
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

<style>

 *{ margin:0; padding:0;}

 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

 .tab { width:240px;margin:50px;}

 .tab_menu { clear:both;}

 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}

 .tab_menu li.hover { background:#DFDFDF;}

 .tab_menu li.selected { color:#FFF; background:#6D84B4;}

 .tab_box { clear:both; border:1px solid #898989; height:100px;}

 .hide{display:none}

</style>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" >

//<![CDATA[

	$(function(){

	    var $div_li =$("div.tab_menu ul li");

	    $div_li.click(function(){

			$(this).addClass("selected")            //当前<li>元素高亮

				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮

            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。

			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 

					.eq(index).show()   //显示 <li>元素对应的<div>元素

					.siblings().hide(); //隐藏其它几个同辈的<div>元素

		}).hover(function(){

			$(this).addClass("hover");

		},function(){

			$(this).removeClass("hover");

		})

	})

//]]>

</script>

</head>

<body>



<div class="tab">

	<div class="tab_menu">

		<ul>

			<li class="selected">时事</li>

			<li>体育</li>

			<li>娱乐</li>

		</ul>

	</div>

	<div class="tab_box"> 

		 <div>时事</div>

		 <div class="hide">体育</div>

		 <div class="hide">娱乐</div>

	</div>

</div>



</body>

</html>

楼主把汉字换成图片或者其他的字就可以了
xmutbbs1 2010-05-01
  • 打赏
  • 举报
 回复
谢谢楼上的。。我是不知道如何确定关键词啊
xiaofan_sap 2010-05-01
  • 打赏
  • 举报
 回复
http://paranimage.com/9-tabs-based-javascrip 学会用谷歌啊 ~~~
xmutbbs1 2010-05-01
  • 打赏
  • 举报
 回复
貌似不是我需要的
xmutbbs1 2010-05-01
  • 打赏
  • 举报
 回复
这速度真快

ababababab 2010-05-01
  • 打赏
  • 举报
 回复
学习.
xiaofan_sap 2010-05-01
  • 打赏
  • 举报
 回复
http://www.sosuo8.com/article/show.asp?id=1572 太多了 原理都一样 自己看看~
为duilib的MenuDemo增加消息响应，优化代码和显示效果
转载请说明原出处，谢谢~~ 第一部分 我在前一段时间研究了怎么制作duilib的菜单，花了几天时间以MenuDemo为基础做出个duilib的菜单以备自用，近些天在群里经常会碰到群友问如何给MenuDemo增加消息响应，为了避免重复的回答我特意写这篇日志，希望可以帮到需要之人，同时也介绍了如何美化菜单的效果、动态修改自身的状态以及通过增加属性来优化菜单的xml...
Android界面特效全汇总
（一）Activity 页面切换的效果   Android 2.0 之后有了 overridePendingTransition（） ，其中里面两个参 数，一个是前一个 activity 的退出两一个 activity 的进入， Java 代码    1.  @Override        public  void  onCreate(Bundle  savedIn
禅与维修摩托车的艺术_罗伯特-M-波西格
----------------------- Page 1-----------------------=================追寻生命的价值：万里任禅游作 者： 罗伯特-M-波西格一段横跨美国的大陆的摩托车之旅，一场拥有两个主讲的哲学肖陶扩，追寻自我，追寻真理，追寻生命的深层价值。本书的故事并不复杂，也没有引人入胜的情节，讲述的只是一个男人在游历中体悟生命意义、获得自我拯救的过程，但...
Android开发_android界面效果全汇总
（一）Activity页面切换的效果   先介绍下左右滑动切换Activity，对于复杂的手势原理一样，具体后述。 主要原理为监控触屏事件和手势事件，在触屏事件处理函数中调用手势事件处理函数，表示用户触屏后是否有手势操作，有则进行手势事件处理，大致分为四步   1、需要继承OnGestureListener和OnDoubleTapListener，如下： Java代码
2020-05-14
求解电脑高手：如果对方的XP用户没有设密码，我如何才能和他远程桌面连接? WIN7远程桌面如果对方2020-05-13来自：网络首先要打开桌面连接，右击我的电脑-属性-远程-勾上“允许用户远程连接到此计算机”。然后开始-程序-附件-通讯-远程桌面连接-输入对方IP，连接即可。你访问的是电脑来宾访问密码，在《我的电脑—右键-管理—本地用户和组——Guest——属性》看看开启了没有。。。设置允许远程桌面访问。在要被远程访问的计算机的桌面上，右击【我的电脑】-【系统属性】然后勾选【允许用户远程连接到此计算机】点击
JavaScript

87,923

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章