这个功能其实很容易实现,我在这告诉你思路一个思路和步骤:
1、把要显示的原样输出,作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏;
2、给查看更多绑定点击事件,点击后show你要展示的内容;
实际代码如下:html 代码
Jquery代码:
扩展资料
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
参考资料:百度百科 jQuery
给你举个例子:<script language="javascript">
function show_div(){
var obj_div=document.getElementById("starlist")
obj_div.style.display=(obj_div.style.display=='none')?'block':'none'
}
function hide_div(){
var obj_div=document.getElementById("starlist")
obj_div.style.display=(obj_div.style.display=='none')?'block':'none'
}
</script>
<a href="javascript:show_div()" >显示/展开</a>
<div id="starlist">
内容<br/>
内容<br/>
内容<br/>
内容<br/>
</div>
这样就可以实现
追问
用jQuery实现,该怎么实现?就是不能弹出的那种,就要一个点击了之后就在下方显示的那种,谢谢!
回答
<!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/htmlcharset=gbk" />
<title>StripingTable</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){ })
function changeDisplay(){
var helloDivObj = $("#helloDiv")
var buttonObj = $("#btnDisplay")
var val = buttonObj.attr("value")
if(val=="隐藏"){
helloDivObj.hide()
buttonObj.attr("value","显示")
}else{
helloDivObj.show()
buttonObj.attr("value","隐藏")
}
}
-->
</script>
</head>
<body>
<input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/>
<div id="helloDiv">
Hello,everyone<p></p>
Hello,everytwo<p></p>
Hello,everythree<p></p>
</div>
</bdoy>
</html>
这个还真见过,,,是一个仿flash的菜单不过还真找不到了,,,刚才搜索一下没看到,你自己搜索一下看看,,又好像是在一些酷站推荐上看到的,,,,不太记得
搜索
html5+css3 圆 仿flash
css3 圆 仿flash
只能慢慢找了,,,