jquery图片导航教程（jQuery导航栏）
本文目录一览：
如何用jquery来制作侧边导航栏？
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejQuery动画垂直折叠导航效果/title
style type="text/css"
.menu_list{width:268px;margin:0 auto;}
.menu_head{
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #F1F1F1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}
/style
/head
body
!-- 代码部分begin --
div id="firstpane" class="0f1c-d23c-2b7b-48b2 menu_list"
h3 class="d23c-2b7b-48b2-2a61 menu_head current"哲学/h3
div style="display:block" class="2b7b-48b2-2a61-32c5 menu_body"
a href=""科学技术哲学/a
a href="#"宗教学/a
a href="#"美学/a
a href="#"伦理学/a
a href="#"逻辑学/a
a href="#"外国哲学/a
a href="#"中国哲学/a
a href="#"马克思主义哲学/a
/div
h3 class="48b2-2a61-32c5-558c menu_head"经济学/h3
div style="display:none" class="2a61-32c5-558c-dd4c menu_body"
a href="#"应用经济学/a
a href="#"理论经济学/a
a href="#"国民经济学/a
a href="#"区域经济学/a
a href="#"产业经济学/a
a href="#"国际贸易学/a
a href="#"劳动经济学/a
a href="#"政治经济学/a
/div
h3 class="32c5-558c-dd4c-6cf6 menu_head"法学/h3
div style="display:none" class="558c-dd4c-6cf6-f16a menu_body"
a href="#"马克思主义基本原理/a
a href="#"马克思主义发展史/a
a href="#"马克思主义中国化研究/a
a href="#"国外马克思主义研究/a
a href="#"思想政治教育/a
/div
h3 class="dd4c-6cf6-f16a-3f3f menu_head"教育学/h3
div style="display:none" class="6cf6-f16a-3f3f-80e4 menu_body"
a href="#"体育人文社会学/a
a href="#"体育教育训练学/a
a href="#"民族传统体育学/a
a href="#"发展与教育心理学/a
a href="#"应用心理学/a
a href="#"教育学原理/a
a href="#"课程与教学论/a
a href="#"比较教育学/a
/div
/div
script src="js/jquery.js"/script
script
$(document).ready(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_body:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
/script
!-- 代码部分end --
/body
/html
你自己引入jQuery。还有下面这两张图片啊
jQuery实现的导航动画效果(附demo源码)
本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下：
经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。
效果如下图：
利用jquery的
animate
函数，很好实现。代码很简单！
代码如下：
!DOCTYPE
html
html
head
meta
charset="utf-8"
title测试/title
script
src="jquery-1.9.1.min.js"/script
/head
body
div
class="f16a-3f3f-80e4-b6fa nav"
style="margin:
100px
auto;
width:960px;"
a
class="3f3f-80e4-b6fa-c962 active"
href="#"首页/a
a
href="#"产品/a
a
href="#"新闻中心/a
a
href="#"关于我们/a
a
href="#"联系我们/a
a
href="#"首页/a
a
href="#"首页/a
div
class="9e3e-6474-a668-ab44 line"/div
/div
style
.nav{
position:relative;
}
.nav
a{
padding:10px
20px;
border-bottom:solid
3px
#fff;
text-decoration:
none;
color:#666;
}
.nav
a:hover{
color:#66f;
}
.nav
.active,
.nav
.active:hover{
color:#f33;
}
.nav
.line{
position:absolute;
border-top:solid
2px
red;
width:0;
left:0;
top:0;
}
/style
script
function
navLine(o,
bo)
{
var
x
=
''
+
(o.position().top
+
o.outerHeight()
-
2)
+
'px';
var
y
=
''
+
o.position().left
+
'px';
var
w
=
''
+
o.outerWidth()
+
'px';
var
h
=
'2px';
$('.nav
.line').stop();
if
(bo)
{
$('.nav
.line').css({width:w,
height:h,
top:x,
left:y});
}
else
{
$('.nav
.line').animate({width:w,
height:h,
top:x,
left:y});
}
}
$(function(){
navLine($('.nav
.active'),
true);
$('.nav
a').hover(function(){
navLine($(this));
},
function(){
navLine($('.nav
.active'));
});
});
/script
/body
/html
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
怎么实现jq导航换图
你描述的不是很清楚，不知道你点击的是导航栏还是轮播的图片；但是，基本做法都是一样的；
就是给元素添加一个click事件（因为你说是jQuery实现，若是纯JavaScript，就用onClick），然后在事件中添加方法，更改img的url属性值就可以实现你的需求了。
Jquery问题，当点击一个导航栏的图片时，其他的变为最开始的图片？
可以把代码这样写：
最好是把箭头向上和箭头向下的都写成不同的class，然后通过jquery控制class来实现图片的变化，你可以试试。
$(document).ready(function () {
$(‘你需要点击的那个选择器’).click(function () {
var j = $(‘你需要点击的那个选择器’).index($(this)[0]);
$(‘你需要点击的那个选择器’).eq(j).addClass(‘背景箭头向上的class’).siblings().removeClass();
return false;
});
});
参考文档：
