jQuery導(dǎo)航切換功能

?Css?--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------??

? /*醫(yī)療團(tuán)隊 醫(yī)院簡介導(dǎo)航樣式*/
??? .MedicalteamAttr
??? {
???? width:140px; height:39px; border:solid 1px Gray; border-bottom:solid #00abeb 3px; background-color:White; float:left; text-align: center; cursor:pointer;
????
??? }
??? .Medicalteam1
??? {
??? ?width:140px; height:39px; border:solid 1px Gray; float:left; text-align:center;cursor:pointer;
??? }
??? .dh
??? {
??? ?width:550px; height:38px;
??? }
??? .yyjj
??????? {
??????? ?
??????? }
??? .yltd
??????? {
??????? ?
??????? }
??? /*醫(yī)療團(tuán)隊 醫(yī)院簡介導(dǎo)航樣式結(jié)束*/
?jQuery?--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------??? /**********************醫(yī)院簡介，醫(yī)療團(tuán)隊導(dǎo)航********************/
/*導(dǎo)航單擊事件*/?????

$(".dh").children("div").click(function(){

??? /*得到當(dāng)前選中Id*/
????? var a= $(this).attr("class","MedicalteamAttr").siblings("div").attr("class","Medicalteam1");
????? var id=a.prop("id");
????? if(id=="yltds")
????? {
???
??????? $(".yyjj").show();
??????? $(".yltd").hide();
??????????
????? }else{
??????? $(".yyjj").hide();
??????? $(".yltd").show();
????? }
?????? return false;
?????? });
?????????? js:父級div的子級單擊方法，當(dāng)前div樣式替換為點擊后樣式（bottom下邊框變?yōu)樗{(lán)色），并且當(dāng)前div同輩元素變換為未點擊樣式（bottom下邊框恢復(fù)原狀）
?/**********************醫(yī)院簡介，醫(yī)療團(tuán)隊導(dǎo)航結(jié)束********************/

Div?--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

?<div style="width: 550px; height: 40px; ">
??????????????????? <div class="dh">
??????????????????????? <div class="MedicalteamAttr" id="yyjjs">
??????????????????????????? <span style="line-height: 40px; font-size: 16px; font-weight: bold;">醫(yī)院簡介</span></div>
??????????????????????? <div class="Medicalteam1" id="yltds">
??????????????????????????? <span style="line-height: 40px; font-size: 16px; font-weight: bold;">醫(yī)療團(tuán)隊</span></div>
??????????????????? </div>
??????????????? </div>
??????????????? <%--導(dǎo)航 這里要寫JS--%>
??????????????? <div style="width: 550px; height: 20px;">
??????????????? </div>
??????????????? <div style="width: 550px; height: 330px; line-height: 30px; font-size: 14px; border: solid #eeeeee 1px;">
??????????????????? <div class="yyjj" style="width: 530px; height: 330px; margin-left: 10px;">
??????????????????????? <span>洗澡、美容、寄養(yǎng)及用品銷售為一體的大型綜合性動物醫(yī)院。
???????????????????????? 醫(yī)院營業(yè)面積200多平米、設(shè)有診斷室（內(nèi)科、外科、健康檢查室）、化驗室、手術(shù)室、X光室、藥房等。本院擁有大型X光機、呼吸麻醉機、全自動血液分析儀、愛德士全自動生化分析儀、心電監(jiān)護(hù)儀、超聲波潔牙機等先進(jìn)動物診療設(shè)備。
??????????????????????????? </span>
??????????????????? </div>
??????????????????? <div class="yltd" style="width: 530px; height: 330px; margin-left: 10px; display:none;">
??????????????????????? <span>醫(yī)療團(tuán)隊：由畢業(yè)于中國農(nóng)業(yè)大學(xué)動物醫(yī)學(xué)院，獲得全國執(zhí)業(yè)獸醫(yī)師資格的專業(yè)獸醫(yī)師構(gòu)</span>
??????????????????? </div>
??????????????? </div>

?

posted on 2015-12-08 15:28 "茶樹" 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/LOVEJIEYING/p/5029268.html

總結(jié)

以上是生活随笔為你收集整理的jQuery导航切换功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。