通用CSS选项卡效果 - html/css语言栏目：html.css

通用CSS选项卡效果 - html/css语言栏目：html.css - 自

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 效果：改成不同的样式时：相关代码：script language=javascript type=text/javascriptfunction DisplayTabNews(tabMainName, num, count){ for(var id = 1; id=count; id++) { var tabId ......

效果：

改成不同的样式时：

相关代码：

function DisplayTabNews(tabMainName, num, count)
{
for(var id = 1; id<=count; id++)
{
var tabId = tabMainName + "_" + id;
var liId = tabMainName + "_li_" + id;
if(id == num) www.2cto.com
{
   document.getElementById(tabId).style.display = "block";
                 document.getElementById(liId ).className = "current";
}
else
{
   document.getElementById(tabId).style.display = "none";
                 document.getElementById(liId ).className = "";
         }
}
}
</script>

<div class="main">
<div class="conList tabsControl">
      <ul class="menu_01">
        <li class="" id="LeftMenuNewsTab_li_1"><a href="/Category_22/Index.aspx" onmouseover="DisplayTabNews('LeftMenuNewsTab',1, 3);" target="_blank">国际</a></li>
        <li id="LeftMenuNewsTab_li_2" class="current"><a href="/Category_23/Index.aspx" onmouseover="DisplayTabNews('LeftMenuNewsTab',2, 3);">国内</a></li>
        <li id="LeftMenuNewsTab_li_3" class=""><a href="/Category_27/Index.aspx" onmouseover="DisplayTabNews('LeftMenuNewsTab',3, 3);">热点追踪</a></li>
      </ul>
    <div class="tabWrap tab_box">
      <div class="tabs" id="LeftMenuNewsTab_1" style="display: none; ">
            <ul>
            <li><a href="/Item/12427.aspx" target="_blank">金正恩视察国家安全保卫部</a></li>
<li><a href="/Item/12425.aspx" target="_blank">美旧金山可能通过“禁裸提案” 招致民众裸体抗议</a></li>
<li><a href="/Item/12423.aspx" target="_blank">美国财政“悬崖”抑制消费者信心</a></li>
<li><a href="/Item/12421.aspx" target="_blank">美专家：美对钓鱼岛争端或表明立场</a></li>
<li><a href="/Item/12417.aspx" target="_blank">菲律宾总统金边拙劣表现遭菲媒痛批</a></li>
          </ul>
        </div>
      </div>
      <div class="tabs hide" id="LeftMenuNewsTab_2" style="display: block; ">
          <ul>
            <li><a href="/Item/12396.aspx" target="_blank">专家称市民手中九成"珍藏"为赝品藏者缺入门知识</a></li>
            <li><a href="/Item/12389.aspx" target="_blank">药企老板改判无罪提出7000万元国家赔偿</a></li>
            <li><a href="/Item/12380.aspx" target="_blank">摊贩遭强收保护费防卫致人死亡庭审哭称太委屈</a></li>
            <li><a href="/Item/12109.aspx" target="_blank">深圳：生殖中心主任非法取卵卫生局吊销医师执照</a></li>
            <li><a href="/Item/12107.aspx" target="_blank">孙春兰兼任天津市委书记张高丽不再兼任</a></li>
          </ul>
        </div>
      </div>
      <div class="tabs hide" id="LeftMenuNewsTab_3" style="display: none; ">
          <ul>
            <li><a href="/Item/12429.aspx" target="_blank">网传广州“房婶”有24套房当事人称只有6套</a></li>
            <li><a href="/Item/12388.aspx" target="_blank">监管部门称未发现人为添“塑化剂”</a></li>
            <li><a href="/Item/12384.aspx" target="_blank">质检部门：酒鬼酒中检出塑化剂</a></li>
            <li><a href="/Item/12381.aspx" target="_blank">酒中有“鬼”？——塑化剂事件真相追踪</a></li>
            <li><a href="/Item/12115.aspx" target="_blank">中国人均储蓄过万世界第一有钱为啥不敢花</a></li>
          </ul>
      </div>
</div>
</div>
</div>
<div class="conList yellow">
      <ul class="menu_01">
        <li class="current" id="MiddleMenuNewsTab_li_1"><a href="/Category_36/Index.aspx" onmouseover="DisplayTabNews('MiddleMenuNewsTab',1, 2);">民生新闻</a></li>
        <li id="MiddleMenuNewsTab_li_2" class=""><a href="/Category_21/Index.aspx" onmouseover="DisplayTabNews('MiddleMenuNewsTab',2, 2);">社区新闻</a></li>
      </ul>
        <div class="tabWrap tab_box">
          <div class="tabs" id="MiddleMenuNewsTab_1" style="display: block; ">
              <div class="topTxt">

            <li>
<div class="gj_pic"><a href="/Item/12415.aspx" target="_blank"><img src="/UploadFiles/xwzx/2012/11/201211221013099863.jpg" alt="建筑工地施工不规范后续整改初见成效" width="115" height="86" border="0"></a></div>
<div class="pe_u_thumb_title">
    <h4><a href="/Item/12415.aspx" target="_blank">建筑工地施工不规范后续整改...</a></h4>11月6日，本报报道布吉海关旁一在建工地施工管理不规范，严重影响市容环境卫生后，有关部门立即采取行动&…<a href="/Item/12415.aspx">【详细】</a></div>
</li>

              </div>
                <div class="BTTxt">
                    <ul>

            <li><a href="/Item/12422.aspx" target="_blank">男子以汽车租赁为幌子空手套白狼半年骗300万</a></li><li><a href="/Item/12415.aspx" target="_blank">建筑工地施工不规范后续整改初见成效</a></li><li><a href="/Item/12410.aspx" target="_blank">汽车城擅自开设路口人车安全无保障</a></li><li><a href="/Item/12397.aspx" target="_blank">龙岗区6000余调解员将持证上岗</a></li><li><a href="/Item/12140.aspx" target="_blank">白湖路路灯几时才能亮？</a></li>

                    </ul>
                </div>
            </div>
          <div class="tabs hide" id="MiddleMenuNewsTab_2" style="display: none; ">
              <div class="topTxt">

            <li>
<div class="gj_pic"><a href="/Item/12418.aspx" target="_blank"><img src="/UploadFiles/xwzx/2012/11/201211221016556803.jpg" alt="《急救小能手》公益讲座走进南湾街道" width="115" height="86" border="0"></a></div>
<div class="pe_u_thumb_title">
    <h4><a href="/Item/12418.aspx" target="_blank">《急救小能手》公益讲座走进...</a></h4>
图为学生们在认真练习包扎。通讯员韩淑坤摄
见习记者尹萌、通讯员韩淑坤报道：日前，龙岗区青少年…<a href="/Item/12418.aspx">【详细】</a></div>
</li>

              </div>
                <div class="BTTxt">
                    <ul>

            <li><a href="/Item/12419.aspx" target="_blank">龙珠社区：教家长孩子讲普通话</a></li><li><a href="/Item/12418.aspx" target="_blank">《急救小能手》公益讲座走进南湾街道</a></li><li><a href="/Item/12405.aspx" target="_blank">平湖巾帼志愿互助会获省级金奖</a></li><li><a href="/Item/12400.aspx" target="_blank">南湾中部片区创新区级土地投融资开发新模式</a></li><li><a href="/Item/12398.aspx" target="_blank">中百饰创意文化园下月底亮相布吉</a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

<div class="conList Purple">
      <ul class="menu_01">
        <li class="" id="RightMenuNewsTab_li_1"><a href="/Category_1027/Index.aspx" onmouseover="DisplayTabNews('RightMenuNewsTab',1, 3);">娱乐</a></li>
        <li id="RightMenuNewsTab_li_2" class="current"><a href="/Category_1026/Index.aspx" onmouseover="DisplayTabNews('RightMenuNewsTab',2, 3);">体育</a></li>
        <li id="RightMenuNewsTab_li_3" class=""><a href="/Category_1028/Index.aspx" onmouseover="DisplayTabNews('RightMenuNewsTab',3, 3);">财经</a></li>
      </ul>
        <div class="tabWrap tab_box">
          <div class="tabs" id="RightMenuNewsTab_1" style="display: none; ">
              <div class="topTxt">

            <li>
<div class="gj_pic"><a href="/Item/12435.aspx" target="_blank"><img src="/UploadFiles/xwzx/2012/11/201211221055528441.jpg" alt="港媒曝32岁陈冠希求婚成功明年迎娶22岁新欢" width="115" height="86" border="0"></a></div>
<div class="pe_u_thumb_title">
    <h4><a href="/Item/12435.aspx" target="_blank">港媒曝32岁陈冠...</a></h4> 据香港媒体报道，陈冠希已经向恋爱不到半年的女友Ann Hong成…<a href="/Item/12435.aspx">【详细】</a></div>
</li>

              </div>
                <div class="BTTxt">
                    <ul>

            <li><a href="/Item/12431.aspx" target="_blank">评审解析金马入围规则：热门影片为何无提名</a></li><li><a href="/Item/12432.aspx" target="_blank">汪小菲母亲仍是政协委员界别为“台胞台属”</a></li><li><a href="/Item/12435.aspx" target="_blank">港媒曝32岁陈冠希求婚成功明年迎娶22岁新欢</a></li><li><a href="/Item/12165.aspx" target="_blank">彭丽媛称与习近平一见钟情赞其纯朴又很有思想</a></li><li><a href="/Item/12124.aspx" target="_blank">章子怡撒贝宁泰国约会被撞破网友催：快结婚</a></li>

                    </ul>
                </div>
            </div>
          <div class="tabs hide" id="RightMenuNewsTab_2" style="display: block; ">
              <div class="topTxt">

            <li>
<div class="gj_pic"><a href="/Item/12448.aspx" target="_blank"><img src="/UploadFiles/xwzx/2012/11/201211221130100023_S.png" alt="【英超】切尔西官方任命新帅贝尼特斯接任" width="115" height="86" border="0"></a></div>
<div class="pe_u_thumb_title">
    <h4><a href="/Item/12448.aspx" target="_blank">【英超】切尔西...</a></h4>网易体育11月22日报道：
在周二（11月20日）晚的欧冠小组赛0-…<a href="/Item/12448.aspx">【详细】</a></div>
</li>

              </div>
                <div class="BTTxt">
                    <ul>

            <li><a href="/Item/12448.aspx" target="_blank">【英超】切尔西官方任命新帅贝尼特斯接任</a></li><li><a href="/Item/12445.aspx" target="_blank">【CBA】广东新赛季变"加强版"国家队</a></li><li><a href="/Item/12443.aspx" target="_blank">前CBA第一高度孙明明遭驾校拒绝</a></li><li><a href="/Item/12437.aspx" target="_blank">埃文斯吃到NBA首张假摔罚单</a></li><li><a href="/Item/12434.aspx" target="_blank">广州马拉松赛仍有一选手生命垂危</a></li>

                    </ul>
                </div>
            </div>
          <div class="tabs hide" id="RightMenuNewsTab_3" style="display: none; ">
              <div class="topTxt">

            <li>
<div class="gj_pic"><a href="/Item/11914.aspx" target="_blank"><img src="/UploadFiles/xwzx/2012/11/201211191015347150.jpg" alt="证监会连出五政策资本市场改革进入新阶段" width="115" height="86" border="0"></a></div>
<div class="pe_u_thumb_title">
    <h4><a href="/Item/11914.aspx" target="_blank">证监会连出五政...</a></h4>
近日，中国证监会连出五项政策，包括上市公司股息红利差别化…<a href="/Item/11914.aspx">【详细】</a></div>
</li>

              </div>
                <div class="BTTxt">
                    <ul>

            <li><a href="/Item/12407.aspx" target="_blank">上海证监局深入学习贯彻落实十八大精神</a></li><li><a href="/Item/12404.aspx" target="_blank">期货资管业务开闸 18家期货公司获资格</a></li><li><a href="/Item/12401.aspx" target="_blank">财政部：研究房产税逐步在全国推开</a></li><li><a href="/Item/12225.aspx" target="_blank">兴业银行获准筹建香港分行</a></li><li><a href="/Item/12113.aspx" target="_blank">海外市场普跌美国“财政悬崖”成后市关…</a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

表单编码过滤器 - html/css语言栏目：html.css - 自学

表单的焦点顺序和对应enter键提交 - html/css语言栏

子栏目

通用CSS选项卡效果 - html/css语言栏目：html.css - 自

最新评论

添加评论

更多文章推荐

添加评论