新聞中心
jquery 更改頁面?zhèn)冗厵?點擊標題 顯示顏色 消除其它的顏色顯示?
$(function(){
軹城ssl適用于網站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!
$(".nav-link").click(function() {
$(this).addClass("active").siblings(".nav-link").removeClass('active');
});
});
我用jquery寫了一個側邊欄,單擊之后下拉,但是再單擊的時候,怎樣實現(xiàn)上拉?
$(document).ready(function(){
$("#according?li").click(function(){
$(this).children("ul").slideToggle();
});
});
如何用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="#"區(qū)域經濟學/a
a?href="#"產業(yè)經濟學/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="#"馬克思主義發(fā)展史/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="#"民族傳統(tǒng)體育學/a
a?href="#"發(fā)展與教育心理學/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側欄,js側邊欄
網站路徑:http://fisionsoft.com.cn/article/dscgdjc.html