jQuery導航切換功能

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

? /*醫療團隊 醫院簡介導航樣式*/
??? .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
??????? {
??????? ?
??????? }
??? /*醫療團隊 醫院簡介導航樣式結束*/
?jQuery?--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------??? /**********************醫院簡介，醫療團隊導航********************/
/*導航單擊事件*/?????

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

??? /*得到當前選中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的子級單擊方法，當前div樣式替換為點擊后樣式（bottom下邊框變為藍色），并且當前div同輩元素變換為未點擊樣式（bottom下邊框恢復原狀）
?/**********************醫院簡介，醫療團隊導航結束********************/

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;">醫院簡介</span></div>
??????????????????????? <div class="Medicalteam1" id="yltds">
??????????????????????????? <span style="line-height: 40px; font-size: 16px; font-weight: bold;">醫療團隊</span></div>
??????????????????? </div>
??????????????? </div>
??????????????? <%--導航 這里要寫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>洗澡、美容、寄養及用品銷售為一體的大型綜合性動物醫院。
???????????????????????? 醫院營業面積200多平米、設有診斷室（內科、外科、健康檢查室）、化驗室、手術室、X光室、藥房等。本院擁有大型X光機、呼吸麻醉機、全自動血液分析儀、愛德士全自動生化分析儀、心電監護儀、超聲波潔牙機等先進動物診療設備。
??????????????????????????? </span>
??????????????????? </div>
??????????????????? <div class="yltd" style="width: 530px; height: 330px; margin-left: 10px; display:none;">
??????????????????????? <span>醫療團隊：由畢業于中國農業大學動物醫學院，獲得全國執業獸醫師資格的專業獸醫師構</span>
??????????????????? </div>
??????????????? </div>

?

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

轉載于:https://www.cnblogs.com/LOVEJIEYING/p/5029268.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。