<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,"5B8B4F53";
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;
100px;
color: #666;
text-align: center;
background: #eee;
}
.active1{
border-bottom:1px solid #fff !important;
background: #fff !important;
}
</style>
<div class="xuan" style="1650px ">
<div style="12%"><span style="font-size: 16px;color: #444;">商品管理</span> <span style="font-size: 12px;color: #888;">商品基本信息设置</span> </div>
<div style=" 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="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,"5B8B4F53";
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;
100px;
color: #666;
text-align: center;
background: #eee;
}
.active1{
border-bottom:1px solid #fff !important;
background: #fff !important;
}
</style>
<div class="xuan" style="1650px ">
<div style="12%;"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span><span >商品管理</span> <span class="c-gray en">></span> 商品添加 </div>
<div style=" 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="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>