1. 程式人生 > >jquery實現導航欄切換

jquery實現導航欄切換

<div class="menu-1-right" id="menu-1-right">
    <div class="menu-1-right-li">
        <a href="#" id="sy">首頁</a>          
    </div>
    <div class="menu-1-right-li item-current">
        <a href="#" id="mpmq">企業電商</a>
        <img src="../images/dh_dbtb.png"
class="dh_dbtb"/>
</div> <div class="menu-1-right-li"> <a href="#" id="qysq">產業商圈</a> <img src="../images/dh_dbtb.png" class="dh_dbtb"/> </div > </div > <div class="menus" id="menus"> <div class="menus_div"
>
<div class="slide-box"> <div class="ej_menus" id="con_one_1"> <ul style="padding-right:60px"> <li class=""><a href="#" style="padding:12px">企業電商首頁</a></li> <li class
="">
<a href="#1F" style="padding:12px">生產廠家</a></li> <li class=""><a href="#2F" style="padding:12px">經銷商</a></li> <li class=""><a href="#3F" style="padding:12px">快消品企業</a></li> <li class=""><a href="#4F" style="padding:12px">店鋪認領</a></li> </ul> </div> <div class="ej_menus" id="con_one_2" style="display: none;"> <ul style="padding-right:60px"> <li class=""><a href="#" style="padding:12px">產業商圈首頁</a></li> <li class=""><a href="#1F" style="padding:12px">找企業</a></li> <li class=""><a href="#2F" style="padding:12px">商圈一覽</a></li> <li class=""><a href="#3F" style="padding:12px">其他商圈</a></li> </ul> </div> </div> <script> $(function(){//核心實現二級選單切換 $("#menu-1-right div").hover(function(){ var _index=$(this).index()-1; $("#menus .ej_menus").eq(_index).show().siblings().hide(); }) }) </script>

相關推薦

jquery實現導航切換

<div class="menu-1-right" id="menu-1-right"> <div class="menu-1-right-li"> &l

jQuery實現導航的樣式切換

樣式: ul{ margin: 0 auto; height: 50px; background-color: #369; } ul>li{ text-decoration: none; display: inline-block; heig

jQuery實現導航

導航欄 adding spl PE char span function nav ack <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jquery 實現導航滑動效果

精簡的程式碼實現導航欄滑動效果,實現詳解: 1.滑塊位置:通過父節點position=fixed,子節點position=absolute方式,實現子節點浮動; 2.導航欄居中:通過left=0px,right=0px,margin-left=auto,margi

利用jquery實現導航

利用jquery+css實現導航欄: js程式碼如下: $(document).ready(function(){ $(".levael2").hide(); var i = 1; $(".level

jquery實現導航吸頂效果(簡潔版)

憋說話,直接上程式碼,先是最最重要的js:   $(function(){     var a = $('#course-tab'),       b =a.offset();//返回或設定導航欄相

微信小程式開發記錄(三)頂部導航切換實現

微信小程式實現頂部導航切換效果可用swiper來實現,效果如下: 程式碼如下: WXML: <view class="page"> <!--頂部導航欄--> <view class="swiper-tab"> <vi

MUI底部導航切換效果

自定義事件 home nvi tlist -a person def fault nis 首先是html代碼: <nav class="mui-bar mui-bar-tab"> <a href="view

【前端】javascript實現導航筋鬥雲效果特效

超時 out die ron 滑動 scrip mouseover none point 實現效果:   實現效果如下圖所示 實現原理: 什麽是筋鬥雲效果: 這個效果很簡單,就是鼠標移到其他導航目錄時會有背景圖片跟著鼠標滑動到當前的目錄。 實現思路: 鼠標經過的時候

jQuery圖片tab切換

pan cte ott spa scrip fff position jquery圖片 int 1 <script> 2 $(function(){ 3 $(‘.tab li‘).mouseenter(function(){ 4

JavaScript實現Tab切換

取出 .html 標簽設置 markdown 選項 保持 for循環 enter 基於 本文最初發表於博客園,並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我,一起入門和進階前端。 以下是正文。 京東網頁上,可以看到下面這種tab欄的切換: 我

jQuery實現導航選單伸縮效果

效果描述:若選單未展開點選則顯示子選單,否則將子選單上卷收縮,同時菜單方向圖示進行改變   <!--left_menu star--> <div class="leftMenu" id="leftmenu"> <div cla

jquery實現導航吸頂效果

jquery實現導航吸頂效果,主要通過監聽頁面滾動事件和獲取頁面各引數實現,可參考我的部落格《使用原生js獲取頁面資訊》和jquery手冊 <!DOCTYPE html> <html> <head lang="en"> <meta cha

css實現導航下劃線跟隨效果

話不多說先附上程式碼 <style> ul li { float: left; display: block; list-style: none; marg

jQuery實現無重新整理切換主題面板功能

主題面板切換功能在很多網站和系統中應用,使用者可以根據此功能設定自己喜歡的主題顏色風格,增強了使用者體驗。本文將圍繞如何使用jQuery實現點選無重新整理切換主題面板功能。 檢視演示DEMO:https://www.helloweba.net/demo/style-switch/ 實現該功能的原理就是通過

HTML 實現導航帶有子列表

這段時間,在學習前端,特此做個筆記。 <!--導航欄--> <div class="titlediv"> <img class="logo" src="../res/logo.png"> <ul

如何實現導航與非垂直下拉框如何無縫連線

<!DOCTYPE html> <<html> <head> <meta charset="UTF-8"/> <meta lang="en"/> <title>test</title>

Android中的底部導航切換TabContainerView

前言:在GitHub上看到一個框架,實現底部導航欄切換,感覺不錯,就在這裡總結一下。 第一步:準備工作。 在project的build.gradle中新增: allprojects { repositories { ... maven

Jquery實現回車鍵Enter切換焦點

出處:http://www.cnblogs.com/ywqu/archive/2010/09/13/1825355.html 系統預設情況下,使用Tab按鍵切換頁面元素的焦點,有沒有想過回車鍵Enter也可以實現這種功能,並且具有良好的使用者體驗。接下來我們使用Jquery實現

Android底部導航切換介面,點選選項時文字和圖示改變顏色

** 類似底部導航欄的選單,點選圖示,文字和圖示都變顏色,Fragment切換介面詳解 ** 先看效果圖 以下是全部完整程式碼,如果有問題歡迎留言 圖示和文字佈局color_change.xml <?xml version="1.0" encodi