zoukankan      html  css  js  c++  java
  • Tab切换

    <%@ Page Language="C#" AspCompat="true" %>

    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

        shuyu.DataSql Dsql = new shuyu.DataSql();
        protected void Page_Load(object sender, EventArgs e)
        {
            //SqlDataReader sdr = Dsql.ExecuteReader("select top(1) 编号 from 企业网站设置 where 编号>" + Request.QueryString["id"].ToString() + " order by 编号");
            //while (sdr.Read())
            //{
            //    //try
            //    //{
            //    shuyu.HtmlToImage thumb = new shuyu.HtmlToImage("http://ent.china2car.com/" + sdr["编号"].ToString() + "/", 930, 730, 930, 730);
            //    System.Drawing.Bitmap x = thumb.GetBitmap();
            //    string SavedFileName = "/upload/template/Index/" + sdr["编号"].ToString() + ".jpg";
            //    x.Save(Server.MapPath(SavedFileName));
            //    x.Dispose();
            //    Dsql.SaveThumbnailImage(SavedFileName, SavedFileName, 308, 231, 100L);
            //    Dsql.ExecuteNonQuery(string.Format("UPDATE 企业网站设置 SET 首页缩略图='{1}' where 编号={0}", sdr["编号"].ToString(), SavedFileName));

            //    //Response.Write(string.Format("<script>location.href='{0}'</" + "script>", "/test.aspx?ID=" + sdr["编号"].ToString()));
            //    Response.Write("<script>window.opener=null;window.open('','_top');window.close();window.open('/test.aspx?id=" + sdr["编号"].ToString() + "');<" + "/script>");
            //    //    }
            //    //    catch
            //    //    {
            //    //        Response.Write(sdr["编号"].ToString() + "错误<br />");
            //    //        Response.Flush();
            //    //    }
            //}
            //sdr.Close();
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link href="/Themes/common.css" type="text/css" rel="stylesheet" />
          <style >   
         .callboard .wenti{240px;height:35px;background-image:url(/Themes/images/index/wenti_bg_img.jpg);}
         .callboard .wenti .button{float:left;80px;height:25px;text-align:center;color:#CC0000;padding-top:10px;}
         .callboard .wenti .button a{80px;height:25px;color:#CC0000;text-align:center;text-decoration:none;}
         .callboard .wenti .button a:hover{80px;height:25px;color:#CC0000;text-align:center;text-decoration:none;}

         .callboard .wenti .buttonactive{float:left;80px;height:25px;text-align:center;background-image: url(/Themes/images/index/wenti_button_bg_img.jpg);color:#CC0000;font-weight:bold;padding-top:10px;}
         .callboard .wenti .buttonactive a{80px;height:25px;color:#CC0000;font-weight:bold;text-align:center;background-image: url(/Themes/images/index/wenti_button_bg_img.jpg);text-decoration:none;background-position:center; text-decoration:none;}
         .callboard .wenti .buttonactive a:hover{80px;height:25px;color:#CC0000;font-weight:bold;text-align:center;background-image:url(/Themes/images/index/wenti_button_bg_img.jpg);text-decoration:none;font-weight:bold;}

         .callboard .wenticontent {240px; height:100px; text-align:left; border:#cccccc; border-1px; border-style:solid;padding:1px;}
         .callboard .wenticontent .content { display:none;}
         .callboard .wenticontent .contentactive { display:block;}

         .callboard .wenticontent ul{230px;margin:5px;padding:0px; list-style-type:none;}
         .callboard .wenticontent ul li{float:left;220px;padding:5px;}
         .guanggao{245px;float:right;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="callboard">
            <div class="wenticontent">
                <div class="wenti">
                    <div class="buttonactive" id='st_div1'>
                        <a onmouseover="setTab(1,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题一</a></div>
                    <div class="button" id='st_div2'>
                        <a onmouseover="setTab(2,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题二</a></div>
                    <div class="button" id='st_div3'>
                        <a onmouseover="setTab(3,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题三</a></div>
                </div>
                <div class="contentactive" id='wt_nr1' style="display: block;">
                    内容一</div>
                <div class="content" id='wt_nr2' style="display: none;">
                    内容二</div>
                <div class="content" id='wt_nr3' style="display: none;">
                    内容三</div>
            </div>
        </div>
        <div class="callboard">
            <div class="wenticontent">
                <div class="wenti">
                    <div class="buttonactive" id='st_div11'>
                        <a onmouseover="setTab(1,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题一</a></div>
                    <div class="button" id='st_div12'>
                        <a onmouseover="setTab(2,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题二</a></div>
                    <div class="button" id='st_div13'>
                        <a onmouseover="setTab(3,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题三</a></div>
                </div>
                <div class="contentactive" id='wt_nr11' style="display: block;">
                    内容一</div>
                <div class="content" id='wt_nr12' style="display: none;">
                    内容二</div>
                <div class="content" id='wt_nr13' style="display: none;">
                    内容三</div>
            </div>
        </div>
        </form>
    </body>
    </html>

    <script type="text/javascript" language="javascript">
        //i 编号;  num 总的栏目数量; fid 父级DIV/LI id;nrid 内容id; SelectStyle 选中后的样式名称;NoStyle未选中的样式名称;
        function setTab(i, num, fid, nrid, SelectStyle, NoStyle)//TAB通用样式
        {
            for (var j = 1; j <= num; j++)//
            {
                if (j == i)//
                {
                    document.getElementById(fid + j).className = SelectStyle;
                    document.getElementById(nrid + j).style.display = "block";
                }
                else//
                {
                    document.getElementById(fid + j).className = NoStyle;
                    document.getElementById(nrid + j).style.display = "none";
                }
            }
        }
    </script>

  • 相关阅读:
    transitiondrawable ImageVIew切换动画
    Android硬件加速
    android PorterDuffXfermode ,PorterDuff.Mode 使用 以及Porter-Duff规则详解
    listview 打对号效果实现
    nrf52832 连接参数更新过程
    Makefile 学习记录一
    W25Q128BV W25Q128FV W25Q128JV 什么区别?
    lwip Packet buffers (PBUF) API 操作 集合
    NRF SDK 中 , C语言 的 一些骚操作 ,记录下
    lwip lwiperf 方法进行性能测试 4.5MB/S
  • 原文地址:https://www.cnblogs.com/shuyu/p/1702320.html
Copyright © 2011-2022 走看看