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

课程

/前端开发

/JavaScript

/JavaScript进阶篇

为啥.on 要加上#tabs ul li 才能出效果

<style type="text/css">
   *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
   #tabs {width:290px;padding:5px;height:150px;margin:20px;}
   #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
   #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;
       border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
   #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
   #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
   .hide{display: none;}
</style>

睛默

2017-05-23

源自：JavaScript进阶篇  10-1

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

正在回答

4 回答

小白_0001
2017-06-29

权值的问题，ID选择器权值为100，类选择器权值为10，所以以#的css样式为主，直接写.on不会生效

1 回复 有任何疑惑可以回复我~
收起回答
北城慕容雪
2017-06-27

我也不清楚实际原因，但猜想是不是样式有个先后顺序呢？先渲染1级样式，然后渲染1级样式的子级样式。

0 回复 有任何疑惑可以回复我~
收起回答
王下无猜
2017-05-25

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

     .mune{

        border:1px solid black;

        padding-top:5px;

        padding-left:20px;

        padding-right:20px;

        padding-bottom:15px;

     }  

     #show{

        margin-top:16px;

        border:solid 1px black;

        height:180px;

        width:300px;

     }  

    </style>

    <script type="text/javascript">

    // JS实现选项卡切换

    function change(muneName){

        var text="";

        if(muneName=="房产"){

        text="<p>275万购昌平邻铁三居 总价20万买一居</p>"+

               "<p>200万内购五环三居 140万安家东三环</p>"+

               "<p>北京首现零首付楼盘 53万购东5环50平</p>"+

               "<p>京楼盘直降5000 中信府 公园楼王现房</p>";

        }else if(muneName=="家居"){

        text="<p>40平出租屋大改造 美少女的混搭小窝</p>"+

               "<p>经典清新简欧爱家 90平老房焕发新生</p>"+

               "<p>新中式的酷色温情 66平撞色活泼家居</p>"+

               "<p>瓷砖就像选好老婆 卫生间烟道的设计</p>";

        }else if(muneName=="二手房"){

        text="<p>通州豪华3居260万 二环稀缺2居250w甩</p>"+

               "<p>西3环通透2居290万 130万2居限量抢购</p>"+

               "<p>黄城根小学学区仅260万 121平70万抛!</p>"+

               "<p>独家别墅280万 苏州桥2居优惠价248万</p>";

        }else{

            text="<p>系统错误</p>";

        }

       document.getElementById("show").innerHTML=text;

    }

    </script>

</head>

<body>

<!-- HTML页面布局 -->

<span onclick="change(this.innerHTML);">房产</span>

<span onclick="change(this.innerHTML);">家居</span>

<span onclick="change(this.innerHTML);">二手房</span>

<div id="show">

    <p>275万购昌平邻铁三居 总价20万买一居</p>

    <p>200万内购五环三居 140万安家东三环</p>

    <p>北京首现零首付楼盘 53万购东5环50平</p>

    <p>京楼盘直降5000 中信府 公园楼王现房</p>

</div>

</body>

</html>

0 回复 有任何疑惑可以回复我~
收起回答
qq_回眸一笑_2
2017-05-23

你猜呢


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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468188    人
  • 解答问题       21891    个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

3 回答#tabs ul li.on和.on有什么区别

2 回答为什么直接写.on{样式}没css效果,而必须是#tabs ul li.on{样式}呢？

2 回答id选择器与类选择器 ，css中用.on和#tabs ul li.on效果为什么不同？

2 回答样式#tabs ul li.on中 li和.on中间有空格和没有空格的区别何在

3 回答为啥不出效果
搜索更多本课相关问答

为啥.on 要加上#tabs ul li 才能出效果

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