2前端案例-选项卡样式

 

<style>
   .xuan {
      margin: 20px 0px 0px 20px;
      padding: 1px;
      font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
      border-bottom:1px solid #999;
      height: 25px;
      line-height: 25px;
   }
   .xuan div{
      display: inline-block;
   }

   .xuan li{
      border:1px solid #999;
      border-radius: 5px 5px 0px 0px ;
      display: inline-block;
      width: 100px;
      color: #666;
      text-align: center;
        background: #eee;
   }

   .active1{
      border-bottom:1px solid #fff !important;
      background: #fff !important;
   }
</style>
<div class="xuan" style="width:1650px ">
   <div style="width:12%"><span style="font-size: 16px;color: #444;">商品管理</span>&nbsp;&nbsp;&nbsp;<span style="font-size: 12px;color: #888;">商品基本信息设置</span>&nbsp;&nbsp;</div>
   <div style="width: 40%"><ul>
      <a href=""><li class="active1">商品信息</li></a>
      <a href=""><li>商品相册</li></a>
      <a href=""><li>商品模型</li></a>
      <a href=""><li>商品物流</li></a>
   </ul></div>
   <div style="width:45%"></div>
</div>
=============================

js代码

<script type="text/javascript" src="_ADMIN_/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    //委托事件，这个意思是这个对象下面的某个a后代点击时，执行事件
    $(".shij").on('click','li',function () {
        //遍历事件，意思所有的a遍历执行方法 所有的a的class为空
        $(".shij li").each(function () {
            $(this).attr("class", "");
        });
        //点击 这一个后代a加class 切2是active
        $(this).attr("class", "active1");

        //给ifranme赋值
        var hrefUrl=$('.active1').attr('hrefUrl');
        $('#iframe1').attr('src',hrefUrl);

        return false;
    })
</script>

html部分

 

 

<style>
   .xuan {
      background: #F5F5F5;
      margin: 0px;
      padding:5px 0px 1px 20px;
      font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
      border-bottom:1px solid #ddd;
      height: 33px;
      line-height: 33px;
   }
   .xuan div{
      display: inline-block;
   }

   .xuan li{
      border:1px solid #bbb;
      border-radius: 5px 5px 0px 0px ;
      display: inline-block;
      width: 100px;
      color: #666;
      text-align: center;
        background: #eee;
   }

   .active1{
      border-bottom:1px solid #fff !important;
      background: #fff !important;
   }
</style>

<div class="xuan" style="width:1650px ">

   <div style="width:12%;"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span><span >商品管理</span> <span class="c-gray en">&gt;</span> 商品添加&nbsp;&nbsp;</div>
   <div style="width: 40%;margin-left: 250px;" class="shij"><ul>
      <a href=""><li class="active1" hrefUrl="{:url('Goods/goodsinfo')}">商品信息</li></a>
      <a href=""><li hrefUrl="{:url('Goods/goodImgs')}">商品相册</li></a>
      <a href=""><li hrefUrl="{:url('Goods/goodModel')}">商品模型</li></a>
      <a href=""><li hrefUrl="{:url('Goods/goodArea')}">商品物流</li></a>
   </ul></div>
   <div style="width:45%"></div>
</div>


<div id="iframe_box" class="Hui-article" style="margin-top: 10px;">
   <div class="show_iframe">
      <div style="display:none" class="loading"></div>
      <iframe id="iframe1" scrolling="yes" frameborder="0" src="{:url('Goods/goodsinfo')}"></iframe>
   </div>
</div>
</body>

转载于:https://www.cnblogs.com/wujunbin/p/7461044.html