简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

javascript - web上使用css實作導覽列？

1、如何實現導覽列就像http://chuangzaoshi.com/code左邊一樣？
2、能用css完全實現嗎？純css怎麼實現？ js怎麼實作？
謝謝！

ps：感謝兩位大神的答案，我沒說清楚，我的疑難如下：

左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。

這個如何實現不清楚，還望賜教。

漂亮男人漂亮男人2648 天前822

全部回覆(2)我來回復

  • 習慣沉默

    習慣沉默2017-06-26 10:52:29

    你指的是哪個效果？ :hover 反白，沒什麼太複雜的。
    例子你自己已經給了，你就打開他的程式碼對照即可。
    如果有哪個特定樣式或效果不理解，可以再問詳細點。
    這樣直接問整個怎麼實現太寬泛了，就是例子當中那樣實現的呀，
    你注視已經把實現的例子給出來了麼？ css 和 js 人家都給你看到了，可以直接參考。

    根據你新追加的提問

    左側導航點擊設計等大的標籤會自動收起原來的，彈出現在的ul，同時右側的內容又跟著變化。

    你可以看到，每次點擊大標籤，其實都是跳到別的頁面，所有大標籤下的 ul 預設都是收起的。
    然後根據當前所在頁你會發現當前大標籤會被帶上一個 active 的 class 名，想要打開的 ul 是緊跟其後，於是就簡單了：

    css 方法是 .active + ul { display:block; }

    jquery 方法是 $('.active').next('ul').css('display','block');

    其他方式大同小異，都是取得 active 活動標籤，註明其下小標籤清單顯示即可。
    根據你給的例子看，由於他不是寫在 css 裡，而是插入 style 屬性，應該是用 js 實現的。

    回覆
    0
  • 学习ing

    学习ing2017-06-26 10:52:29

    你是要滑鼠移動過去的變色效果吧？

    • 用CSS實現的話，左邊用列表做，然後改樣式，用:hover偽類去配鼠標移動過去的樣式
      比如

    ul li {
    ... // 此处为常规样式
}

ul li:hover {
    ... // 此处为鼠标经过的样式
}

    • 如果用JS實現的話，就要監聽對應元素的滑鼠進入事件onmouseenter，將清單的項目中除了當前項，其他的樣式都設定為常規樣式，還要監聽元素的滑鼠離開事件onmouseleave ，在滑鼠離開時需要將先前滑鼠經過時設定的樣式恢復成常規樣式。

    Update

    建議下次問問題時候第一次就把問題詳細情況描述清楚，否則會浪費回答者的時間的。

    針對你後來問的問題，

    左側的HTML佈置大概是這樣

    <ul>
    <li></li>
    ...
</ul>

    然後，老鼠移過變白的，上面已經說過了。
    點擊的話，則是給被點擊的

  • 加上一個CSS類，比如.active，然後，加上之前的:hover，CSS類似這樣：

    ul li {
    ... // 此处为常规样式
}

ul li:hover {
    ... // 此处为鼠标经过的样式
}

ul li.active {
    ... // 此处为当前标签的样式
}

    當然，由於此例子中當前標籤和滑鼠經過樣式一樣，可以把ul li:hover和ul li.active合起來寫作

    ul li:hover,
ul li.active {
    ... // 此处为鼠标经过的样式（即当前标签样式）
}

    這樣，還不至於能夠切換標籤，右側的HTML佈局大概這樣：

    <p id="main"><!-- 此处不一定要是id="main"，主要是为了方便定位右侧容器的根元素而已，也方便后面示例讲解 -->
    <p></p>
    ...
</p>

    預設用CSS將#main中第一個子p顯示出來，將其他的隱藏，建議也給p加上.active類，有.active類的顯示，反之隱藏。 

    #main > p {
    display: none; /* 默认将所有#main下面一级的p全隐藏 */
}

#main > p.active { /* 这个表示#main下面有active类的子p */
    display: block;
}

    然後，寫JS事件，不過原生的寫起來比較蛋疼，建議用jQuery來操作，下面給出兩種寫法示例
    原生：

    var li = document.getElementsByTagName('ul')[0].getElementByTagName('li'); // 这个需要自己去写，匹配到ul下的li

var main = document.getElementById('main');
var blocks = main.children();

for(var i = 0, len = li.length; i < len; i++) {
    var bind_li = li[i];
    
    // 给每一个li绑定点击事件，点击事件中，需要清除其他li的`.active`并给自己加上`.active`，另外还要将右侧的p也做一样的操作（上面已经取到p数组blocks）。
    bind_li.onclick = function() {
        for(var j = 0; j < len; j++) {
            if(j == i) { // j和i相等，表示为当前点击的
                li[j].className = 'active';
                blocks[j].className = 'active';
            } else {
                li[j].className = '';
                blocks[j].className = '';
            }
        }
    }
});

    如果用jQuery函式庫，就會簡單很多，如下：

    $('ul li').click(function() { // 点击的li元素
    var index = $(this).index();
    // 获取当前点击的li元素在ul中的顺序，
    // 稍后要同样对#main中的p进行操作
    // 比如点的是第一个li
    // 也就要使#main中的第一个p显示
    $(this)
        .addClass('active') // 给当前li加上.active
        .siblings('li') // 选中同一级其他的li
        .removeClass('active'); // 给同一级其他li去除.active
    $('#main > p').eq(index) // #main下面第index个p
        .addClass('active')
        .siblings('p')
        .removeClass('active');
});

    結語

    這解釋了這麼多，但是我想告訴你一個很令人崩潰的消息。就是，你給的範例網站，可能根本沒有這麼做。這個網站有可能是做了4個頁面然後透過連結互相跳轉的，而每個頁面上面當前頁的標籤是一直亮著的。 （由於沒有仔細去看原始碼，但看URL位址不同也不清楚是不是做的路由，所以只是說「可能」）。

    回覆
    0
  • 取消回覆