請大神幫我解答
我在做一個網(wǎng)頁，想用到選項卡
效果圖：
代碼是：
<div?class="menu">
?????<ul>
??????<li><a?href="#pic"?id="current"?>相冊</a></li>
??????<li><a?href="#video">視頻</a></li>
??????<li><a?href="#message">動態(tài)</a></li>
?????</ul>
</div>
<div?class="boxmain">
?????<div?class="pic?clearfix">
????????<div?>123</div>
????????<div>123</div>
?????</div>
?????<div?class="video?clearfix">
????????<div>456</div>
????????<div>456</div>
?????</div>
?????<div?class="message?clearfix">
????????<div>789</div>
????????<div>789</div>
?????</div>
</div>
就是鏈接對應的每個div里面，又有很多的div,該怎么修改js才能實現(xiàn)選項卡的效果。
附上視頻里的js代碼：
function?$(id){
?return?typeof?id==='string'?document.getElementById(id):id;
}
window.onload=function(){
?//獲取鼠標滑過或點過的標簽和要切換的內(nèi)容的元素
?var?titles=$('notice-tit').getElementsByTagName('li');
?????divs=$('notice-con').getElementsByTagName('div');
?if(titles.length!=divs.length)
?return;
?//遍歷title下的所有l(wèi)i
?for?var?i=0;i<titles.length;i++){
??titles[i].id=i;
??titles[i].onclick=function(){
???//清楚所有l(wèi)i上的class
???for(var?j=0;j<titles.length;j++){
????titles[j].className='';
????divs[j].style.display='none';
???}
???//設置當前為高亮顯
???this.className='select';
???divs[this.id].style.display='block';
??}
?}
}
請大神求救，
2017-04-06
function getId(id){
return ?typeof id==="string"?document.getElementById(id):id;
};
window.addEventListener("load",function(){
//獲取鼠標滑過或點擊的標簽和要切換的內(nèi)容的元素
var navList=getId("nav").getElementsByTagName("li");
? ? var contentList=getId("content").getElementsByTagName("div");
? ? // alert(navList.length);alert(contentList.length);
? ? //導航分頁li標簽的索引
? ? var pointer=0;
? ? //timer為定時器
? ? var timer=null;
? ? if (navList.length!=contentList.length) {
? ? return ;
? ? }
? ? //遍歷navList下的所有的li標簽
? ? for(var i=0;i<navList.length;i++){
? ? // 自定義添加的id屬性,設置索引
? ? //navList[i].id=i;
? ? //var index=navList[i].getAttribute("index");
? ? navList[i].addEventListener("mouseover",function(event){
? ? ? ? ? ? ? //這也是一種獲取索引的方式,通過獲取自定義的index的值
? ? ? ? ? ? ? ?//alert(this.getAttribute("index"));
? ? ? ? ? ? ? ?//如果存在準備執(zhí)行的定時器，則立刻清除,只有當前停留時間超過500ms時執(zhí)行
? ? ? ? ? ? ? ?if(timer){
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? ? ? timer=null;
? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ?//用that來引用當前滑過的li
? ? ? ? ? ? ? ?var that=this;
? ? ? ? ? ? ? ?//alert(that);
? ? ? ? ? ? ? ?//延遲500ms執(zhí)行
? ? ? ? ? ? ? ?timer=setTimeout(function(){
? ? ? ? ? ? ? ? for(var j=0;j<navList.length;j++){
? ? ? ? ? ? ? ? ? ? ?navList[j].className="";
? ? ? ? ? ? ? ? ? ? ?contentList[j].style.display="none";
? ? ? ? ? ? ? ?};
? ? ? ? ? ? ?that.className="select";
? ? ? ? ? ? ? contentList[that.getAttribute("index")-1].style.display="block";?
? ? ? ? ? ? ?
? ? ? ? ? ? ? ?},400);
? ? ? ? ? ? ? ?
? ? },false);
? ? }
},false);