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>

  • 相关阅读:
    DEDECMS里面DEDE函数解析
    dede数据库类使用方法 $dsql
    DEDE数据库语句 DEDESQL命令批量替换 SQL执行语句
    织梦DedeCms网站更换域名后文章图片路径批量修改
    DSP using MATLAB 示例 Example3.12
    DSP using MATLAB 示例 Example3.11
    DSP using MATLAB 示例 Example3.10
    DSP using MATLAB 示例Example3.9
    DSP using MATLAB 示例Example3.8
    DSP using MATLAB 示例Example3.7
  • 原文地址:https://www.cnblogs.com/shuyu/p/1702320.html
Copyright © 2011-2022 走看看