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)不清楚,還望賜教。
你指的是哪個效果? :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)的。
你是要鼠標(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ī)樣式。
建議下次問問題時候第一次就把問題詳細(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:hover
和ul 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');
});
這解釋了這么多,但是我想告訴你一個很讓人崩潰的消息。就是,你給的示例網(wǎng)站,可能根本沒有這么做。這個網(wǎng)站有可能是做了4個頁面然后通過鏈接互相跳轉(zhuǎn)的,而每個頁面上面當(dāng)前頁的標(biāo)簽是一直亮著的。(由于沒有仔細(xì)去看源碼,但是看URL地址不同也不清楚是不是做的路由,所以只是說“可能”)。