javascript - web上使用css实现导航栏？

问题描述

问 题

1、如何实现导航栏就像http://chuangzaoshi.com/code左侧一样？
2、能用css完全实现吗？纯css怎么实现？js怎么实现？
谢谢！

ps：感谢两位大神的答案，我没说清楚，我的疑难如下：

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

这个如何实现不清楚，还望赐教。

解决方案

你是要鼠标移动过去的变色效果吧？

• 用CSS实现的话，左边用列表做，然后改样式，用:hover伪类去配鼠标移动过去的样式
  比如

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

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

• 如果用JS实现的话，就要监听对应元素的鼠标进入事件onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。

Update

建议下次问问题时候第一次就把问题详细情况描述清楚，否则会浪费回答者的时间的。

针对你后来问的问题，

左侧的HTML布局大概是这样

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

然后，鼠标移过变白的，上面已经说过了。
点击的话，则是给被点击的<li>加上一个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布局大概这样：

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

默认用CSS将#main中第一个子div显示出来，将其他的隐藏，建议也给div加上.active类，有.active类的显示，反之隐藏。

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

#main > div.active { /* 这个表示#main下面有active类的子div */
    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`，另外还要将右侧的div也做一样的操作（上面已经取到div数组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中的div进行操作
    // 比如点的是第一个li
    // 也就要使#main中的第一个div显示
    $(this)
        .addClass('active') // 给当前li加上.active
        .siblings('li') // 选中同一级其他的li
        .removeClass('active'); // 给同一级其他li去除.active
    $('#main > div').eq(index) // #main下面第index个div
        .addClass('active')
        .siblings('div')
        .removeClass('active');
});

结语

这解释了这么多，但是我想告诉你一个很让人崩溃的消息。就是，你给的示例网站，可能根本没有这么做。这个网站有可能是做了4个页面然后通过链接互相跳转的，而每个页面上面当前页的标签是一直亮着的。（由于没有仔细去看源码，但是看URL地址不同也不清楚是不是做的路由，所以只是说可能）。

这篇关于javascript - web上使用css实现导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！