慕课网javascript 进阶篇 第十章 编程练习

---恢复内容开始---

第十章的编程练习是选项卡切换的问题。

  先分析下思路,

一、HTML页面布局

 我们可以用ui li 标签来写最上面一行的内容;用个div来装下面内容,为了实现更多的效果,我们可以把上面那行的文字放在<a>标签里。

二、CSS样式制作

  对文档进行基本的样式设置,font color border 那些

三、JS实现选项卡切换

通过改变DOM的css类名称,当前点击的选项卡显示,其它隐藏。

---恢复内容结束---

第十章的编程练习是选项卡切换的问题。

  先分析下思路,

一、HTML页面布局

 我们可以用ui li 标签来写最上面一行的内容;用个div来装下面内容,为了实现更多的效果,我们可以把上面那行的文字放在<a>标签里。

二、CSS样式制作

  对文档进行基本的样式设置,font color border 那些

三、JS实现选项卡切换

1 当我们点击的时候下面的内容是变换过来了,那么就是内容的的切换,我一开始可以设置三个div,分别装三部分文字内容,切换到谁就让谁显示出来

也就是display:block;其余的都是display:none;隐藏起来。

2  既然是一个选项对应这一个内容 那他们之间是什么联系着的?我们在写js的时候应该怎么把两者关联上,因为我们绑定事件的时候 他们是要一起发生事件的。

开始敲吧:

 html css布局  加样式就不多说了 主要是js:

 <style type="text/css">
        /* CSS样式制作 */
   div,.house,ul,p,a{margin:0px;
              padding:0px;
       font-size:14px;
       font-family:Arial,'sans-serif',微软雅黑;
        }
   div{
       text-indent:8px;
   }
  a{color: #819d8c;
      display:inline-block;
     width:62px;
    height:22px;
      text-decoration: none;
    border:none;}
  a:hover{
      color: #4c6fe2;}
  a:active{color: #e29996
  }
 ul{ margin-left:40px;
     border-bottom:2px saddlebrown solid;
     display: block;
     height: 22px;
   width:302px;}

        li{
            list-style: none;
            display: inline-block;
           border-top:2px solid rgba(89, 110, 180, 0.44);
            border-left:1px solid rgba(89, 110, 180, 0.44);
            border-right:1px solid rgba(89, 110, 180, 0.44);
            border-bottom:2px solid #6e3c2a;
            text-align: center;
            line-height:20px;
            width:60px;
            height:20px;;
            padding:0px;
            margin:0px;
            background:#fff;

        }
 .div1,.div2,.div3 {width:300px;
     height:120px;
     border:1px solid #7e96e2;
     border-top:none;
     margin-left:40px;

 }
 .div2,.div3{  display: none;

 }

  p         {padding-top:5px;
     }
.house{
    list-style: none;
    display: inline-block;
    border:1px solid #819d8c;
    border-bottom:2px solid #fff;
    border-top:2px solid #6e3c2a;
    text-align: center;
    line-height:20px;
    width:60px;
    height:px;;
    padding:0px;
    margin:0px;

}
  .hide{display: none;}
</style>
<ul>
    <li class="house"><a href="#" onclick="changecolor()">房产</a></li>
    <li><a href="#" onclick="changecolor()">家居</a></li>
    <li><a href="#" onclick="changecolor()">二手房</a></li>
</ul>
<div class="div1">
        <p>275万购昌平邻铁三居 总价20万买一居</p>
        <p>200万内购五环三居 140万安家东三环</p>
        <p>北京首现零首付楼盘 53万购东5环50平</p>
        <p>京楼盘直降5000 中信府 公园楼王现房</p>

</div>
<div class="div2">
    <p>40平出租屋大改造 美少女的混搭小窝</p>
    <p>经典清新简欧爱家 90平老房焕发新生</p>
    <p>新中式的酷色温情 66平撞色活泼家居</p>
    <p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="div3">
    <p>通州豪华3居260万 二环稀缺2居250w甩</p>
    <p>西3环通透2居290万 130万2居限量抢购</p>
    <p>黄城根小学学区仅260万 121平70万抛!</p>
    <p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>
js:
<script type="text/javascript">
        // JS实现选项卡切换

        function changecolor() {
            var anode=document.getElementsByTagName("a");
            var linode=document.getElementsByTagName("li");
            var divnode=document.getElementsByTagName("div")
           // var divn2ode=document.getElementById("div2");
            //var divn3ode=document.getElementById("div3");

            for(var i=0;i<linode.length;i++){
                linode[i].index=i;  //因为一开始不知道index这个属性;所以一直联系不上li标签和div标签的关系
                linode[i].onclick=function () {

                 for(var n=0;n<linode.length;n++){
                      linode[n].className="";
                      divnode[n].className="hide";
                    }      //这个地方给的for循环很有意思 也用的很好  得好好琢磨琢磨
                    this.className="house";//这两端代码不能写在内部for循环之前,因为js是从上解析到下的 因为前面的for循环是把所有的li属性都归结到原始的状态
                    divnode[this.index].className="div1";//我们后面的是给前面归结到原始状态的添加新的className属性 div属性也一样 一开始都隐藏起来 后来在给予


               }
                }
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2627
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2727
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4055
来自专栏魂祭心

原 canvas绘制clock

4254
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5387
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2675
来自专栏落花落雨不落叶

canvas画简单电路图

65111
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5676
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4074

扫码关注云+社区