suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - CSS zum Implementieren der Navigationsleiste im Web verwenden?

1. Wie implementiert man die Navigationsleiste wie auf der linken Seite von http://chuangzaoshi.com/code?
2. Kann es vollständig mit CSS realisiert werden? Wie implementiert man reines CSS? Wie implementiert man js?
Danke!

ps: Danke an die beiden Meister für ihre Antworten, die ich nicht klar erklärt habe:

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

Wie man das umsetzt, ist nicht klar, ich hoffe, Sie können mir einen Rat geben.

漂亮男人漂亮男人2738 Tage vor887

Antworte allen(2)Ich werde antworten

  • 習慣沉默

    習慣沉默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 实现的。

    Antwort
    0
  • 学习ing

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

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

    • 用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:hoverul 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地址不同也不清楚是不是做的路由,所以只是说“可能”)。

    Antwort
    0
  • StornierenAntwort