课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：1-4 js实现切换效果

大boo撕

2015-12-17 10:14

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

写回答 关注

5回答

  • 我们在成长
    2015-12-17 11:52:42
    已采纳

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

    3 0

    大boo撕 回复我们在成长

    还是不行 欲哭无泪 ，而且这个老师好像没有引用jQuery文件

    2015-12-17 14:24:21

    共 3 条回复 >

  • 我们在成长
    2015-12-17 16:43:00

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

    <!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 17:31:47

    共 1 条回复 >

  • 大boo撕
    2015-12-17 13:39:20

    jQuery怎么引入呢

    0 0
  • 大boo撕
    2015-12-17 10:48:15

    <!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>


    1 0

    产品经理哦

    当在一个函数里面执行 return 语句时，该函数将会停止执行。一个指定的值将会被返回给函数调用者。如果未指定返回表达式，则返回 undefined.详情请看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/return

    2016-02-29 02:31:01

    共 1 条回复 >

  • 李晓健
    2015-12-17 10:45:25

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

    0 0

Tab选项卡切换效果

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

65469 学习 · 533 问题

查看课程

相似问题

怎么没效果

回答 1

怎么没有效果呢？

回答 4

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

回答 5

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

回答 2

求救！怎么回事呢？？

回答 3

打开慕课网App查看更多内容