正文
jquery侧栏,js侧边栏
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery 更改页面侧边栏 点击标题 显示颜色 消除其它的颜色显示？
$(function(){
$(".nav-link").click(function() {
$(this).addClass("active").siblings(".nav-link").removeClass('active');
});
});
相关问答
Q1: 我用jquery写了一个侧边栏，单击之后下拉，但是再单击的时候，怎样实现上拉？
$(document).ready(function(){
$("#according li").click(function(){
$(this).children("ul").slideToggle();
});
});
Q2: 如何用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="menu_list"
h3 class="menu_head current"哲学/h3
div style="display:block" class="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="menu_head"经济学/h3
div style="display:none" class="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="menu_head"法学/h3
div style="display:none" class="menu_body"
a href="#"马克思主义基本原理/a
a href="#"马克思主义发展史/a
a href="#"马克思主义中国化研究/a
a href="#"国外马克思主义研究/a
a href="#"思想政治教育/a
/div
h3 class="menu_head"教育学/h3
div style="display:none" class="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。还有下面这两张图片啊
