一个无序表单形成的类似于导航条的插件

标签：style   color   io   for   ar   cti   div   代码   

//样式
.sfbMaqtitle{width:960px;height:36px;background:#ff8500;padding:7px 0;font-size:18px;overflow:hidden;}
.sfbMaqtitle li{cursor:pointer;display:inline-block;float:left;width:150px;line-height:36px;margin:0 43px;*margin:0 43px!important;*margin:0 40px;color:#fff;text-align:center;overflow:hidden;}
.sfbMaqtitle li.hover{background:url(/Images/sfb_ico_01.gif) no-repeat 0 -112px;color:#ff8500;overflow:hidden;}
//执行函数
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}


div展示相应代码
    <div class="sfbMaq">

//横向选择 效果类似 首页 关于展示 等等
        <ul class="sfbMaqtitle">
            <li id="abt1" onmouseover="setTab(‘abt‘,1,4)" class="hover">收益</li>
            <li id="abt2" onmouseover="setTab(‘abt‘,2,4)">增值服务</li>
            <li id="abt3" onmouseover="setTab(‘abt‘,3,4)">申购</li>
            <li id="abt4" onmouseover="setTab(‘abt‘,4,4)">赎回</li>
        </ul>
        <div id="con_abt_1" class="sfbMaqcomment">
            <dl>
                <dt>
                    <div class="sfbMaqcleft sfbMaqcl01"></div>
                    <div class="sfbMaqcright">搜房宝的收益构成？</div>
                </dt>
                <dd>
                    <div class="sfbMaqcleft sfbMaqcl02"></div>
                    <div class="sfbMaqcright">搜房宝的综合收益是由基金收益和房金构成。 <br /></div>
                </dd>
            </dl>
            <dl>
                <dt>
                    <div class="sfbMaqcleft sfbMaqcl01"></div>
                    <div class="sfbMaqcright">什么时候能看到收益到账？</div>
                </dt>
                <dd>
                    <div class="sfbMaqcleft sfbMaqcl02"></div>
                    <div class="sfbMaqcright">转入资金在基金公司确认份额的下一个工作日可看到基金收益，基金收益与房金收益同时到账。如遇国家法定假期，基金公司延迟进行份额确认，以实际收益时间为准。</div>
                </dd>
            </dl>
            <dl>
                <dt>
                    <div class="sfbMaqcleft sfbMaqcl01"></div>
                    <div class="sfbMaqcright">搜房宝的收益结算有什么规则？</div>
                </dt>
                <dd>
                    <div class="sfbMaqcleft sfbMaqcl02"></div>
                    <div class="sfbMaqcright">搜房宝的货币基金收益每日结算，每个工作日15：00左右前一工作日结算的收益到基金账户，房金的收益也同步结算。赎回申请当日有收益，从赎回申请日的下一工作日起不计算收益。 </div>
                </dd>
            </dl>
        </div>
        <div id="con_abt_2" class="sfbMaqcomment" style="display:none">
    内容
         </div>
        <div id="con_abt_3" class="sfbMaqcomment" style="display:none">
    内容
        </div>
        <div id="con_abt_4" class="sfbMaqcomment" style="display:none">
    内容
        </div>
    </div>

一个无序表单形成的类似于导航条的插件,布布扣,bubuko.com

一个无序表单形成的类似于导航条的插件

标签：style   color   io   for   ar   cti   div   代码   

原文地址：http://www.cnblogs.com/eric-gms/p/3922412.html