js 選項卡 【滑鼠懸停標題，顯示對應內容，改變其他標題顏色並隱藏內容】...

weixin_30650859發表於2019-07-30
JS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="divSliding.aspx.cs" Inherits="WebDemoList.divSliding" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> 
<head id="Head1" runat="server">
    <title>無標題頁</title>
    <link href="CSS.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
       

        $(document).ready(function () {
            setTab('Label', 1, 7)
        });

        function setTab(name, cursel, n) {
            for (i = 1; i <= n; i++) {
                var menu = document.getElementById(name + i);
                var con = document.getElementById("con_" + name + "_" + i);
                if (cursel == 1) {
                    document.getElementById("label1").style.color = "red";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "black";
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "black";

                }
                else if (cursel == 2) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "red";
                    document.getElementById("label3").style.color = "black";    
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "black";
                }
                else if (cursel == 3) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "red";
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "black";
                }
                else if (cursel == 4) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "black";
                    document.getElementById("label4").style.color = "red";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "black";
                }
                else if (cursel == 5) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "black";
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "red";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "black";
                }
                else if (cursel == 6) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "black";
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "red";
                    document.getElementById("label7").style.color = "black";
                }
                else if (cursel == 7) {
                    document.getElementById("label1").style.color = "black";
                    document.getElementById("label2").style.color = "black";
                    document.getElementById("label3").style.color = "black";
                    document.getElementById("label4").style.color = "black";
                    document.getElementById("label5").style.color = "black";
                    document.getElementById("label6").style.color = "black";
                    document.getElementById("label7").style.color = "red";
                }

                con.style.display = i == cursel ? "block" : "none";

            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <center>
        <div class="xinwen">
           <br />
            <asp:Label ID="Label1" runat="server" Text="一" οnmοuseοver="setTab('Label',1,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label2" runat="server" Text="二" οnmοuseοver="setTab('Label',2,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label3" runat="server" Text="三" οnmοuseοver="setTab('Label',3,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label4" runat="server" Text="四" οnmοuseοver="setTab('Label',4,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label5" runat="server" Text="五" οnmοuseοver="setTab('Label',5,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label6" runat="server" Text="六" οnmοuseοver="setTab('Label',6,7)" ></asp:Label>&nbsp;
            <asp:Label ID="Label7" runat="server" Text="七" οnmοuseοver="setTab('Label',7,7)" ></asp:Label>


               <div id="con_Label_1" style="float:left;">
                         <div style="float:left;">111</div>
                </div>
                <div id="con_Label_2" style="float:left;">
                         <div style="float:left;">222</div>
                </div>
                <div id="con_Label_3" style="float:left;">
                        <div style="float:left;">333</div>
                </div>
                <div id="con_Label_4" style="float:left;">
                     <div style="float:left;">444</div>
                </div>
                <div id="con_Label_5" style="float:left;">
                     <div style="float:left;">555</div>
                </div>
                <div id="con_Label_6" style="float:left;">
                     <div style="float:left;">666</div>
                </div>
                <div id="con_Label_7" style="float:left;">
                     <div style="float:left;">777</div>
                </div>
        </div>
    </center>
    </form>
</body>
</html>

 

轉載於:https://www.cnblogs.com/JiangXiaoTian/articles/2590071.html

相關文章