为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/Tab选项卡切换效果

按照老师的写 没出效果 怎么回事

按照老师的写 没出效果 怎么回事

大boo撕

2015-12-17

源自：Tab选项卡切换效果  1-4

关注问题 我要回答
1354
操作
收起

正在回答

5 回答

我们在成长 回答被采纳 +3 积分
2015-12-17

老师的已经引入了jQuery，你的没有，所以不能用$()

0 回复 有任何疑惑可以回复我~
收起回答
#1

大boo撕 提问者

那jQuery要怎么引入呢
2015-12-17 回复 有任何疑惑可以回复我~
#2

大boo撕 提问者 回复 我们在成长

还是不行 欲哭无泪 ，而且这个老师好像没有引用jQuery文件
2015-12-17 回复 有任何疑惑可以回复我~
我们在成长
2015-12-17

抱歉，我实在找不到你错哪了，我又重新写了一遍，你看一下吧

<!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>产品介绍</p>
      <ul>
        <li name="titli" class="select">汽车</li>
        <li name="titli">多晶硅</li>
        <li name="titli">银粉</li>
        <li name="titli">手机</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>汽车</h2>
            <p>揽胜运动版从硬朗的轮廓线条、悬浮式车顶到大角度挡风玻璃，揽胜运动版的设计水平被提升至又一个高度。</p>
          </div>
        </li>
        <li class="conli">
          <div class="img img22">
            <img src="img中富商银/duo.jpg" />
          </div>
          <div class="bcontent content22">
            <h1>多晶硅</h1>
            <p>多晶硅，是单质硅的一种形态。熔融的单质硅在过冷条件下凝固时，硅原子以金刚石晶格形态排列成许多晶核，如这些晶核长成晶面取向不同的晶粒，则这些晶粒结合起来，就结晶成多晶硅。</p>
          </div>
        </li>
        <li class="conli">
          <div class="img img33">
            <img src="img中富商银/yin.jpg" />
          </div>
          <div class="bcontent content33">
            <h1>银粉</h1>
            <p>白色有光泽的面心立方结构的金属，性柔软，延展性仅次于金，是热和电的优良导体。</p>
          </div>
        </li>
        <li class="conli">
          <div class="img img44">
            <img src="img中富商银/shou.jpg" />
          </div>
          <div class="bcontent content44">
            <h1>手机</h1>
            <p>iphone 6 采用 4.7 英寸屏幕，分辨率为 1334*750 像素，内置 64 位构架的苹果 A8 处理器，性能提升非常明显；同时还搭配全新的 M8 协处理器，专为健康应用所设计；采用后置 800 万像素镜头。</p>
          </div>
        </li>
        <li class="conli">
          <div class="img img55">
          <img src="img中富商银/gui.jpg" />
          </div>
          <div class="bcontent content55">
            <h1>桂圆</h1>
            <p>桂圆，又名龙眼，益智，常绿大乔木，树体高大。7～8月果实成熟呈黄褐色时采摘。为无患子科植物,果供生食或加工成干制品，肉、核、皮及根均可作药用。原产于中国南部及西南部。</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>


1 回复 有任何疑惑可以回复我~
收起回答
#1

大boo撕 提问者

你写的运行的出来！谢谢！我自己再研究哈哈
2015-12-17 回复 有任何疑惑可以回复我~
大boo撕 提问者
2015-12-17

jQuery怎么引入呢

0 回复 有任何疑惑可以回复我~
收起回答
大boo撕 提问者
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>无标题文档</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;">产品介绍</p>

            </li>

              <li class="title select" >

                <a href="#">汽车</a></li>

              <li class="title">

                <a href="#">多晶硅</a></li>

              <li class="title">

                <a href="#">银粉</a></li>

              <li class="title">

                <a href="#">手机</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>汽车</h1>

           <p>揽胜运动版从硬朗的轮廓线条、悬浮式车顶到大角度挡风玻璃，揽胜运动版的设计水平被提升至又一个高度。</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>多晶硅，是单质硅的一种形态。熔融的单质硅在过冷条件下凝固时，硅原子以金刚石晶格形态排列成许多晶核，如这些晶核长成晶面取向不同的晶粒，则这些晶粒结合起来，就结晶成多晶硅。</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>白色有光泽的面心立方结构的金属，性柔软，延展性仅次于金，是热和电的优良导体。</p>

          </div>

        </div>

     

        <div  id="Con4" style="display:none;">

          <div class="img img44">

            <img src="img中富商银/shou.jpg" />

          </div>

          <div class="bcontent content44">

            <h1>手机</h1>

            <p>iphone 6 采用 4.7 英寸屏幕，分辨率为 1334*750 像素，内置 64 位构架的苹果 A8 处理器，性能提升非常明显；同时还搭配全新的 M8 协处理器，专为健康应用所设计；采用后置 800 万像素镜头。</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>桂圆，又名龙眼，益智，常绿大乔木，树体高大。7～8月果实成熟呈黄褐色时采摘。为无患子科植物,果供生食或加工成干制品，肉、核、皮及根均可作药用。原产于中国南部及西南部。</p>

        </div>

      </div>

     </div>

    </div>

 

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
#1

产品经理哦

当在一个函数里面执行 return 语句时，该函数将会停止执行。一个指定的值将会被返回给函数调用者。如果未指定返回表达式，则返回 undefined.详情请看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/return
2016-02-29 回复 有任何疑惑可以回复我~
李晓健
2015-12-17

把你的完整代码帖出来，大家才能看出你的问题所在，不然的话我只能说老师的内功比你的高，所以他的可以你的不行。

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
Tab选项卡切换效果
  • 参与学习       65476    人
  • 解答问题       533    个

本课程详细介绍网页页面中最流行常用的tab切换效果

进入课程

本课相似问答

1 回答怎么没效果

4 回答怎么没有效果呢？

5 回答为什么用老师的方法没有效果

2 回答为什么看着老师的写的没效果啊？谁发份源码看看？？？

3 回答求救！怎么回事呢？？
搜索更多本课相关问答

按照老师的写 没出效果 怎么回事

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信