jquery入门—编写一个导航条(可伸缩)_Javascript教程-查字典教程网
jquery入门—编写一个导航条(可伸缩)
jquery入门—编写一个导航条(可伸缩)
发布时间:2017-01-14 来源:查字典编辑
摘要:1、编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容。示例代码如下:复制代码代码如下:NewDocumentbody{...

1、编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容。

示例代码如下:

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js">

</script>

<style type="text/css">

body{font-size:13px}

#divFrame{border:solid 1px #666;width:301px;overflow:hidden}

#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}

#divFrame .clsHead h3{padding:0px;margin:0px;float:left}

#divFrame .clsHead span{float:right;margin-top:3px}

#divFrame .clsContent{padding:8px}

#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}

#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px}

#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}

.GetFocus{background-color:#eee}

</style>

<script type="text/javascript">

$(function(){ //页面加载事件

$(".clsHead").click(function(){ //图片点击事件

if($(".clsContent").is(":visible")){ //如果内容可见

$(".clsHead span img").attr("src","Images/a1.gif"); //改变图片

$(".clsContent").css("display","none"); //隐藏内容

}else{

$(".clsHead span img").attr("src","Images/a2.gif"); //改变图片

$(".clsContent").css("display","block");//显示内容

}

});

$(".clsBot > a").click(function(){ //热点链接点击事件

if($(".clsBot > a").text()=="简化"){ //如果内容为'简化'字样

$("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素

$(".clsBot > a").text("更多"); //将字符内容更改为"更多"

}else{

$("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式

$(".clsBot > a").text("简化"); //将字符内容更改为"简化"

}

});

});

</script>

</HEAD>

<BODY>

<div id="divFrame">

<div>

<h3>图书分类</h3>

<span><img src="Images/a2.gif" alt="book!"/></span>

</div>

<div>

<ul>

<li><a href="#">小说</a><i> ( 1110 ) </i></li>

<li><a href="#">文艺</a><i> ( 230 ) </i></li>

<li><a href="#">青春</a><i> ( 1430 ) </i></li>

<li><a href="#">少儿</a><i> ( 1560 ) </i></li>

<li><a href="#">生活</a><i> ( 870 ) </i></li>

<li><a href="#">社科</a><i> ( 1460 ) </i></li>

<li><a href="#">管理</a><i> ( 1450 ) </i></li>

<li><a href="#">计算机</a><i> ( 1780 ) </i></li>

<li><a href="#">教育</a><i> ( 930 ) </i></li>

<li><a href="#">工具书</a><i> ( 3450 ) </i></li>

<li><a href="#">引进版</a><i> ( 980 ) </i></li>

<li><a href="#">其它类</a><i> ( 3230 ) </i></li>

</ul>

</div>

<div>

<a href="#">简化</a>

<img src="Images/a5.gif" />

</div>

</div>

</BODY>

</HTML>

2、效果图:

点击后:

简化后:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类