zoukankan      html  css  js  c++  java
  • Tab菜单切换效果

    <style type="text/css">
    <!--
    #Tab1{
    482px;
    margin:0px;
    padding:0px;
    margin:0 auto;}
    /*菜单class*/
    .Menubox {
    100%;
    height:28px;
    line-height:28px;
    }
    .Menubox ul{
    margin:0px;
    padding:0px;
    }
    .Menubox li{
    float:left;
    display:block;
    cursor:pointer;
    85px;
    }
    .Contentbox{
    clear:both;
    margin-top:-4px;
    border:1px solid #E5E1D5;
    border-top:none;
    height:150px;
    text-align:center;
    padding-top:10px;
    border-bottom:none;
    }
    .one1{ background:url(images/index_03_01.gif) no-repeat center; 85px; height:35px; }
    .hover1{
     background:url(images/index_03.gif) no-repeat center; 85px; height:35px;
    }
    .one2{ background:url(images/index_04.gif) no-repeat center; 85px; height:35px;}
    .hover2{
     background:url(images/index_04_01.gif) no-repeat center; 85px; height:35px;
    }
    -->
    </style>
    <script>
    <!--
    /*第一种形式 第二种形式 更换显示样式*/
    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"+i:"one"+i;
     con.style.display=i==cursel?"block":"none";

    }
    }
    //-->
    </script>


     

    <div id="Tab1">
    <div class="Menubox">
    <ul>
    <li style=" 5px; height:35px"><img src="images/index_01.gif"></li>
    <li id="one1" class="hover1"  onmouseover="setTab('one',1,4)"></li>
    <li id="one2" class="one2" onmouseover="setTab('one',2,4)" ></li>
    <li style="303px; height:35px"><img src="images/index_02.gif"></li>
    </ul>
    </div>
    <div class="Contentbox">
    <div id="con_one_1" class="hover">
    <%
     reval=""
     reval = reval & "<table width=440 border=0 align=center cellpadding=0 cellspacing=0>" & vbCrlf
     reval = reval & "<tr>" & vbCrlf
     reval = reval & "<td width=""110""><img src={imgname} width=92 height=63 /></td>" & vbCrlf
     reval = reval & "<td><span class=font2>{title}</span><br />{summary}<a href={link}>详细&gt;&gt; </a></td>" & vbCrlf
     reval = reval & "</tr>" & vbCrlf
     reval = reval & "</table>" & vbCrlf
     response.Write GetTopNews(reval,"ctlgid=3 and not(imgname is null)","newshow.asp",1,50,50)
    %>
    <table width="446" border="0" align="center" cellpadding="0" cellspacing="0" class="table2">
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </table>
                   <%
        reval2=""
        reval2 = reval2 & "<table width=450 border=0 align=center cellpadding=0 cellspacing=0>" & vbCrlf
        reval2 = reval2 & "<tr>" & vbCrlf
        reval2 = reval2 & "<td width=20><div align=center><img src=images/index_28.gif width=3 height=5 /></div></td>" & vbCrlf
        reval2 = reval2 & "<td><a href={link}>{title}</a></td>" & vbCrlf
        reval2 = reval2 & "<td width=80 class=font1>[{edittime}]</td>" & vbCrlf
        reval2 = reval2 & "</tr>" & vbCrlf
        reval2 = reval2 & "</table>" & vbCrlf
        response.Write GetTopNews(reval2,"ctlgid=3 and (imgname is null)","newshow.asp",4,50,"")
        %>

    </div>
    <div id="con_one_2" style="display:none">
    <%
     response.Write GetTopNews(reval,"ctlgid=4 and not(imgname is null)","newshow.asp",1,50,50)
    %>
    <table width="446" border="0" align="center" cellpadding="0" cellspacing="0" class="table2">
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </table>
                   <%
        response.Write GetTopNews(reval,"ctlgid=4 and (imgname is null)","newshow.asp",4,50,"")
        %>

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

  • 相关阅读:
    Java集合框架面试题
    Java:concurrent包下面的Collection接口框架图( CopyOnWriteArraySet, CopyOnWriteArrayList,ConcurrentLinkedQueue,BlockingQueue)
    JDK1.5新特性,基础类库篇,浅谈并发工具包(Concurrency Utilities)
    《Java Concurrency》读书笔记,使用JDK并发包构建程序
    Java:多线程,Exchanger同步器
    Java:多线程,CountDownLatch同步器
    Java:多线程,CyclicBarrier同步器
    Java:多线程,Semaphore同步器
    《Java Concurrency》读书笔记,构建线程安全应用程序
    《Java Concurrency》读书笔记,Java并发编程实践基础
  • 原文地址:https://www.cnblogs.com/zlmlovem/p/1451437.html
Copyright © 2011-2022 走看看