国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - web上使用css實現(xiàn)導(dǎo)航欄?
漂亮男人
漂亮男人 2017-06-26 10:50:29
0
2
994

1、如何實現(xiàn)導(dǎo)航欄就像http://chuangzaoshi.com/code左側(cè)一樣?
2、能用css完全實現(xiàn)嗎?純css怎么實現(xiàn)?js怎么實現(xiàn)?
謝謝!

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

左側(cè)導(dǎo)航點擊設(shè)計等大的標(biāo)簽會自動收起原來的,彈出現(xiàn)在的ul,同時右側(cè)的內(nèi)容又跟著變化。

這個如何實現(xiàn)不清楚,還望賜教。

漂亮男人
漂亮男人

全部回復(fù)(2)
習(xí)慣沉默

你指的是哪個效果? :hover 反白,沒什么太復(fù)雜的啊。
例子你自己已經(jīng)給出來了,你就打開他的代碼對照即可。
如果有哪個特定樣式或者效果不理解,可以再問詳細(xì)點。
這樣直接問整個怎么實現(xiàn)太寬泛了,就是例子當(dāng)中那樣實現(xiàn)的呀,
你注視已經(jīng)把實現(xiàn)的例子給出來了么?css 和 js 人家都給你看到了,可以直接參考。

根據(jù)你新追加的提問

左側(cè)導(dǎo)航點擊設(shè)計等大的標(biāo)簽會自動收起原來的,彈出現(xiàn)在的ul,同時右側(cè)的內(nèi)容又跟著變化。

你可以看到,每次點擊大標(biāo)簽,其實都是跳轉(zhuǎn)到別的頁面,所有大標(biāo)簽下的 ul 默認(rèn)都是收起的。
然后根據(jù)當(dāng)前所在頁你會發(fā)現(xiàn)當(dāng)前大標(biāo)簽會被帶上一個 active 的 class 名,想要打開的 ul 是緊跟其后,于是就簡單了:

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

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

其他方式大同小異,都是取得 active 活動標(biāo)簽,注明其下小標(biāo)簽列表顯示即可。
根據(jù)你給出的例子看,由于他不是寫在 css 里,而是插入 style 屬性,應(yīng)該是用 js 實現(xiàn)的。

學(xué)習(xí)ing

你是要鼠標(biāo)移動過去的變色效果吧?

  • 用CSS實現(xiàn)的話,左邊用列表做,然后改樣式,用:hover偽類去配鼠標(biāo)移動過去的樣式
    比如

ul li {
    ... // 此處為常規(guī)樣式
}

ul li:hover {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式
}
  • 如果用JS實現(xiàn)的話,就要監(jiān)聽對應(yīng)元素的鼠標(biāo)進(jìn)入事件onmouseenter,將列表的項目中除了當(dāng)前項,其他的樣式都設(shè)置為常規(guī)樣式,還要監(jiān)聽元素的鼠標(biāo)離開事件onmouseleave,在鼠標(biāo)離開時需要將之前鼠標(biāo)經(jīng)過時設(shè)置的樣式恢復(fù)成常規(guī)樣式。

Update

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

針對你后來問的問題,

左側(cè)的HTML布局大概是這樣

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

然后,鼠標(biāo)移過變白的,上面已經(jīng)說過了。
點擊的話,則是給被點擊的<li>加上一個CSS類,比如.active,然后,加上之前的<li>加上一個CSS類,比如.active,然后,加上之前的:hover,CSS類似這樣:

ul li {
    ... // 此處為常規(guī)樣式
}

ul li:hover {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式
}

ul li.active {
    ... // 此處為當(dāng)前標(biāo)簽的樣式
}

當(dāng)然,由于此例子中當(dāng)前標(biāo)簽和鼠標(biāo)經(jīng)過樣式一樣,可以把ul li:hoverul li.active合起來寫作

ul li:hover,
ul li.active {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式(即當(dāng)前標(biāo)簽樣式)
}

這樣,還不至于能夠切換標(biāo)簽,右側(cè)的HTML布局大概這樣:

<p id="main"><!-- 此處不一定要是id="main",主要是為了方便定位右側(cè)容器的根元素而已,也方便后面示例講解 -->
    <p></p>
    ...
</p>

默認(rèn)用CSS將#main中第一個子p顯示出來,將其他的隱藏,建議也給p加上.active類,有.active類的顯示,反之隱藏。

#main > p {
    display: none; /* 默認(rèn)將所有#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`,另外還要將右側(cè)的p也做一樣的操作(上面已經(jīng)取到p數(shù)組blocks)。
    bind_li.onclick = function() {
        for(var j = 0; j < len; j++) {
            if(j == i) { // j和i相等,表示為當(dāng)前點擊的
                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();
    // 獲取當(dāng)前點擊的li元素在ul中的順序,
    // 稍后要同樣對#main中的p進(jìn)行操作
    // 比如點的是第一個li
    // 也就要使#main中的第一個p顯示
    $(this)
        .addClass('active') // 給當(dāng)前l(fā)i加上.active
        .siblings('li') // 選中同一級其他的li
        .removeClass('active'); // 給同一級其他li去除.active
    $('#main > p').eq(index) // #main下面第index個p
        .addClass('active')
        .siblings('p')
        .removeClass('active');
});

結(jié)語

這解釋了這么多,但是我想告訴你一個很讓人崩潰的消息。就是,你給的示例網(wǎng)站,可能根本沒有這么做。這個網(wǎng)站有可能是做了4個頁面然后通過鏈接互相跳轉(zhuǎn)的,而每個頁面上面當(dāng)前頁的標(biāo)簽是一直亮著的。(由于沒有仔細(xì)去看源碼,但是看URL地址不同也不清楚是不是做的路由,所以只是說“可能”)。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板