按照老師的寫(xiě) 沒(méi)出效果 怎么回事
按照老師的寫(xiě) 沒(méi)出效果 怎么回事
大boo撕
2015-12-17
5 回答
舉報(bào)
0/150
提交
取消
2015-12-17
老師的已經(jīng)引入了jQuery，你的沒(méi)有，所以不能用$()
2015-12-17
抱歉，我實(shí)在找不到你錯(cuò)哪了，我又重新寫(xiě)了一遍，你看一下吧
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"> ??<title></title> ??<style?type="text/css"> ????*{ ??????margin:?0; ??????padding:?0; ????} ????li{ ??????list-style:?none; ????} ????.bottom1?{ ????margin-top:?18px; ????float:?left; ????width:?675px; ????height:?260px; ????background-color:?#fff; ????font-size:?14px; ????font-family:?"微軟雅黑"; ????position:?relative; ??} ??.bottom1?.tabList?{ ????width:?675px; ????height:?42px; ????line-height:?45px; ????border-bottom:?3px?solid?#63A9FE; } ??.tabList>p{ ????width:?190px; ????height:?30px; ????font-size:?18px; ????font-weight:?bold; ????display:?inline-block; ????float:?left; ??} ??.bottom1?.tabList?ul?li?{ ????list-style:?none; ????width:?80px; ????height:?42px; ????float:?left; ????margin-top:?0px; ????background-color:?#FFF; ????text-align:?center; ????cursor:?pointer; } .bottom1?.tabList?ul?.select{ ??????border:?1px?solid?#DCDCDC; ??????border-bottom:?2px?solid?#fff; ??????color:?#666; } .bottom1?.tabCon?{ ????width:?673px; ????height:?217px; ????border:?1px?solid?#DCDCDC; ????border-top:?none; ????position:?absolute; } .bottom1?.tabCon?li{ ??display:?none; } .tabCon?.img?{ ????width:?265px; ????height:?177px; ????float:?left; ????margin-top:?26px; ????margin-left:?45px; ????position:?absolute; } .bcontent?{ ????width:?300px; ????height:?150px; ????margin-top:?46px; ????margin-left:?340px; ????position:?absolute; } ??</style> ??<script?type="text/javascript"> ????window.onload=function?()?{ ??????var?titles=document.getElementsByName('titli'); ??????var?content=document.getElementsByClassName('conli'); ??????for(var?i=0;i<titles.length;i++){ ??????????titles[i].id=i; ??????????titles[i].onclick=function(){ ??????????for(var?j=0;j<titles.length;j++){ ????????????titles[j].className=''; ????????????content[j].style.display='none'; ??????????} ??????????this.className='select'; ??????????content[this.id].style.display='block'; ????????} ??????} ????} ??</script> </head> <body> ??<div?class="bottom1"?id="tab"> ????<div?class="tabList"?id="tabList"> ??????<p>產(chǎn)品介紹</p> ??????<ul> ????????<li?name="titli"?class="select">汽車(chē)</li> ????????<li?name="titli">多晶硅</li> ????????<li?name="titli">銀粉</li> ????????<li?name="titli">手機(jī)</li> ????????<li?name="titli">桂圓</li> ??????</ul> ????</div> ????<div?class="tabCon"?id="tabCon"> ??????<ul> ????????<li?class="conli"?style="display:?block;"> ??????????<div?class="img?img11"> ????????????<img?src="img中富商銀/qi.jpg"> ??????????</div> ??????????<div?class="bcontent?content11"> ????????????<h2>汽車(chē)</h2> ????????????<p>攬勝運(yùn)動(dòng)版從硬朗的輪廓線條、懸浮式車(chē)頂?shù)酱蠼嵌葥躏L(fēng)玻璃，攬勝運(yùn)動(dòng)版的設(shè)計(jì)水平被提升至又一個(gè)高度。</p> ??????????</div> ????????</li> ????????<li?class="conli"> ??????????<div?class="img?img22"> ????????????<img?src="img中富商銀/duo.jpg"?/> ??????????</div> ??????????<div?class="bcontent?content22"> ????????????<h1>多晶硅</h1> ????????????<p>多晶硅，是單質(zhì)硅的一種形態(tài)。熔融的單質(zhì)硅在過(guò)冷條件下凝固時(shí)，硅原子以金剛石晶格形態(tài)排列成許多晶核，如這些晶核長(zhǎng)成晶面取向不同的晶粒，則這些晶粒結(jié)合起來(lái)，就結(jié)晶成多晶硅。</p> ??????????</div> ????????</li> ????????<li?class="conli"> ??????????<div?class="img?img33"> ????????????<img?src="img中富商銀/yin.jpg"?/> ??????????</div> ??????????<div?class="bcontent?content33"> ????????????<h1>銀粉</h1> ????????????<p>白色有光澤的面心立方結(jié)構(gòu)的金屬，性柔軟，延展性?xún)H次于金，是熱和電的優(yōu)良導(dǎo)體。</p> ??????????</div> ????????</li> ????????<li?class="conli"> ??????????<div?class="img?img44"> ????????????<img?src="img中富商銀/shou.jpg"?/> ??????????</div> ??????????<div?class="bcontent?content44"> ????????????<h1>手機(jī)</h1> ????????????<p>iphone?6?采用?4.7?英寸屏幕，分辨率為?1334*750?像素，內(nèi)置?64?位構(gòu)架的蘋(píng)果?A8?處理器，性能提升非常明顯；同時(shí)還搭配全新的?M8?協(xié)處理器，專(zhuān)為健康應(yīng)用所設(shè)計(jì)；采用后置?800?萬(wàn)像素鏡頭。</p> ??????????</div> ????????</li> ????????<li?class="conli"> ??????????<div?class="img?img55"> ??????????<img?src="img中富商銀/gui.jpg"?/> ??????????</div> ??????????<div?class="bcontent?content55"> ????????????<h1>桂圓</h1> ????????????<p>桂圓，又名龍眼，益智，常綠大喬木，樹(shù)體高大。7～8月果實(shí)成熟呈黃褐色時(shí)采摘。為無(wú)患子科植物,果供生食或加工成干制品，肉、核、皮及根均可作藥用。原產(chǎn)于中國(guó)南部及西南部。</p> ??????????</div> ????????</li> ??????</ul> ????</div> ??</div> </body> </html>2015-12-17
jQuery怎么引入呢
2015-12-17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
function $(id){
return typeof id ==='string'?document.getElementById(id):id;
}
window.onload=function(){
var titles=$('#tabList').getElementsByTagName('li'),
? ?divs=$('#tabCon').getElementsByTagName('div');
if(titles.length!=divs.length)
return;
for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onclick=function(){
for(var j=0;j<titles.length;j++)
{
titles[j].className='';
divs[j].style.display='none';
}
this.className='select';
div[this.id].style.display='block';
}
}
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.bottom1{
margin-top:18px;
float:left;
width:675px;
height:260px;
background-color:#FFFFFF;
font-size:14px;
font-family:"微軟雅黑";
position:relative;
}
.bottom1 .tabList{
width:675px;
height:42px;
line-height:45px;
border-bottom:3px solid #63A9FE;
}
.bottom1 .tabList ul li{
list-style:none;
width:80px;
height:42px;
float:left;
margin-top:0px;
background-color:#FFF;
text-align:center;
}
.bottom1 .tabList ?a{
text-decoration:none;
color:#000;
cursor:pointer;
}
.bottom1 ul li.titlemore a:hover{
color:#F90;
}
.bottom1 .tabCon{
width:673px;
height:217px;
border:1px solid #DCDCDC;
border-top:none;
position:absolute;
}
.tabCon .img{
width:265px;
height:177px;
float:left;
margin-top:26px;
margin-left:45px;
position:absolute;
}
.bcontent{
width:300px;
height:150px;
margin-top:46px;
margin-left:340px;
position:absolute;
}
.bcontent h1{
font-size:20px;
font-weight:600;
color:#333;
}?
#tab .tabList li.select a{
display:block;
border:1px solid #DCDCDC;
border-bottom:none;
height:44px;
background-color:#FFF;
color:#666;
}
</style>
</head>
<body>
?<div class="bottom1" id="tab">
? ? ? ? <div class="tabList" id="tabList">
? ? ? ? ?<ul>
? ? ? ? ? ? <li class="introduce" style="width:190px;
? ? ? ? height:30px;font-size:18px;font-weight:bold;">
? ? ? ? ? ? <p style="text-align:left;">產(chǎn)品介紹</p>
? ? ? ? ? ? </li>
? ? ? ? ? ? ? <li class="title select" >
? ? ? ? ? ? ? ? <a href="#">汽車(chē)</a></li>
? ? ? ? ? ? ? <li class="title">
? ? ? ? ? ? ? ? <a href="#">多晶硅</a></li>
? ? ? ? ? ? ? <li class="title">
? ? ? ? ? ? ? ? <a href="#">銀粉</a></li>
? ? ? ? ? ? ? <li class="title">
? ? ? ? ? ? ? ? <a href="#">手機(jī)</a></li>
? ? ? ? ? ? ? <li class="title">
? ? ? ? ? ? ? ? <a href="#">桂圓</a></li>
? ? ? ? ? ? ? <li class="titlemore">
? ? ? ? ? ? <a href="#">查看更多+</a>
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ?</div>
? ? ? <div class="tabCon" id="tabCon">
? ? ? ? <div id="Con1" class="mod" style="display:block;">
? ? ? ? ? <div class="img img11">
? ? ? ? ? ? <img src="img中富商銀/qi.jpg" />
? ? ? ? ? </div>
? ? ? ? ? <div class="bcontent content11">
? ? ? ? ? ? <h1>汽車(chē)</h1>
? ? ? ? ? ?<p>攬勝運(yùn)動(dòng)版從硬朗的輪廓線條、懸浮式車(chē)頂?shù)酱蠼嵌葥躏L(fēng)玻璃，攬勝運(yùn)動(dòng)版的設(shè)計(jì)水平被提升至又一個(gè)高度。</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ?
? ? ? ? <div ?id="Con2" style="display:none;">
? ? ? ? ? <div class="img img22">
? ? ? ? ? ? <img src="img中富商銀/duo.jpg" />
? ? ? ? ? </div>
? ? ? ? ? <div class="bcontent content22">
? ? ? ? ? ? <h1>多晶硅</h1>
? ? ? ? ? ? <p>多晶硅，是單質(zhì)硅的一種形態(tài)。熔融的單質(zhì)硅在過(guò)冷條件下凝固時(shí)，硅原子以金剛石晶格形態(tài)排列成許多晶核，如這些晶核長(zhǎng)成晶面取向不同的晶粒，則這些晶粒結(jié)合起來(lái)，就結(jié)晶成多晶硅。</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ?
? ? ? ? <div id="Con3" style="display:none;">
? ? ? ? ? <div class="img img33">
? ? ? ? ? ? <img src="img中富商銀/yin.jpg" />
? ? ? ? ? </div>
? ? ? ? ? <div class="bcontent content33">
? ? ? ? ? ? <h1>銀粉</h1>
? ? ? ? ? ? <p>白色有光澤的面心立方結(jié)構(gòu)的金屬，性柔軟，延展性?xún)H次于金，是熱和電的優(yōu)良導(dǎo)體。</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ?
? ? ? ? <div ?id="Con4" style="display:none;">
? ? ? ? ? <div class="img img44">
? ? ? ? ? ? <img src="img中富商銀/shou.jpg" />
? ? ? ? ? </div>
? ? ? ? ? <div class="bcontent content44">
? ? ? ? ? ? <h1>手機(jī)</h1>
? ? ? ? ? ? <p>iphone 6 采用 4.7 英寸屏幕，分辨率為 1334*750 像素，內(nèi)置 64 位構(gòu)架的蘋(píng)果 A8 處理器，性能提升非常明顯；同時(shí)還搭配全新的 M8 協(xié)處理器，專(zhuān)為健康應(yīng)用所設(shè)計(jì)；采用后置 800 萬(wàn)像素鏡頭。</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ?
? ? ? <div ?id="Con5" style="display:none;">
? ? ? ? <div class="img img55">
? ? ? ? ? <img src="img中富商銀/gui.jpg" />
? ? ? ? </div>
? ? ? ? <div class="bcontent content55">
? ? ? ? ? <h1>桂圓</h1>
? ? ? ? ? <p>桂圓，又名龍眼，益智，常綠大喬木，樹(shù)體高大。7～8月果實(shí)成熟呈黃褐色時(shí)采摘。為無(wú)患子科植物,果供生食或加工成干制品，肉、核、皮及根均可作藥用。原產(chǎn)于中國(guó)南部及西南部。</p>
? ? ? ? </div>
? ? ? </div>
? ? ?</div>
? ? </div>
?
</body>
</html>
2015-12-17
把你的完整代碼帖出來(lái)，大家才能看出你的問(wèn)題所在，不然的話我只能說(shuō)老師的內(nèi)功比你的高，所以他的可以你的不行。