js 选项卡 【鼠标悬停标题，显示对应内容，改变其他标题颜色并隐藏内容】...

最新推荐文章于 2023-07-20 10:30:08 发布
最新推荐文章于 2023-07-20 10:30:08 发布
阅读量250 收藏
点赞数
文章标签： xhtml javascript c# ViewUI
原文链接：http://www.cnblogs.com/JiangXiaoTian/articles/2590071.html
版权 
<%@ 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

didie4846
关注
js菜单栏（以鼠标悬停到头像显示详细信息为例）
每天进步一点点
08-07 2331
类似二级菜单，以qq为例
CSS3特效鼠标悬停文字标题切换对应内容代码.zip
07-11
这是一款个性创意的css3鼠标悬停文字标题切换对应内容代码，交互切换效果非常棒，还有动画特效，可用于问答展示。 </head> <body> <div class="demo">   <div class="demo__content">     <h2 class="demo__heading">你喜欢什么样的页面布局呢？</h2>     <div class="demo__elems">       <div class="demo__elem demo__elem-1">简约的多文字布局</div>       <div class="demo__elem demo__elem-2">一列的图文混排布局</div>       <div class="demo__elem demo__elem-3">两列的图文混排布局</div>       <span class="demo__hover demo__hover-1"></span>       <span class="demo__hover demo__hover-2"></span>       <span class="demo__hover demo__hover-3"></span>       <div class="demo__highlighter">         <div class="demo__elems">           <div class="demo__elem">简约的多文字布局</div>           <div class="demo__elem">一列的图文混排布局</div>           <div class="demo__elem">两列的图文混排布局</div>         </div>       </div>       <div class="demo__examples">         <div class="demo__examples-nb">           <div class="nb-inner">             <div class="example example-adv">               <div class="example-adv">                 <div class="example-adv__top">                   <div class="example-adv__top-search"></div>                 </div>                 <div class="example-adv__mid"></div>                 <div class="example-adv__line"></div>                 <div class="example-adv__line long"></div>               </div>             </div>             <div class="example example-web">               <div class="example-web__top"></div>               <div class="example-web__left"></div>               <div class="example-web__right">                 <div class="example-web__right-line"></div>                 <div class="example-web__right-line"></div>                 <div class="example-web__right-line"></div>                 <div class="example-web__right-line"></div>                 <div class="example-web__right-line"></div>                 <div class="example-web__right-line"></div>               </div>             </div>
js鼠标滑过新闻标题列表显示对应新闻内容【原创】
非典型程序员
12-12 749
有一个页面，左边是新闻列表标题，鼠标划过相应的标题，在右侧显示相应的内容。代码如下： 首先是分开左侧的列表和右侧的内容区域，内容用矩形边框框起来。 css：       #Sidebar {          width:745px;height:515px;float:left;             margin-top:20px;                 backgrou...
鼠标滑过标签选项卡切换代码.zip
07-11
鼠标滑过标签选项卡切换代码，经常用于企业网站，在网站中左侧展示，然后显示一些新闻或者产品的信息，效果也还是很不错的，php中文网推荐下载！
js鼠标滑过标签选项卡切换代码.zip
07-05
【标题】"js鼠标滑过标签选项卡切换代码"是一个基于JavaScript实现的交互式网页设计元素，常用于网站导航或信息展示。这种效果允许用户通过鼠标悬停在不同的标签上，来切换显示不同的内容区域。在医院美容网站中，...
jQuery鼠标经过选项卡内容切换代码.zip
07-11
2. **内容切换**：当鼠标进入选项卡时，使用`.show()`方法显示对应的内容区域，同时使用`.hide()`方法隐藏其他内容。这通常涉及到对CSS `display`属性的修改。 3. **动画效果**：jQuery提供了丰富的动画功能，可以...
鼠标经过选项卡菜单高亮显示图文变换js特效代码.zip
07-11
通过CSS，我们可以定义选项卡的初始样式、鼠标悬停时的高亮效果，以及图文信息的隐藏与显示。例如，可以使用`display`属性来控制图文信息的可见性，当鼠标悬停时设置为`display:block`使其可见，反之设置为`display:...
jQuery纵向tab选项卡内容切换代码.zip_Tabú_jquery_纵向tab选项卡内容切换代码_纵向选项卡%2
09-23
3. 当鼠标悬停在选项卡上时，使用`next()`或`prev()`方法找到相邻的内容区域，并通过改变CSS的`display`属性来显示或隐藏。 4. 为了实现自动滑动效果，可能需要设置定时器，定期切换当前选中的选项卡。 5. 使用CSS3...
js 点击button切换颜色_CSS实现下拉菜单，点击下拉区域以外的区域关闭菜单
weixin_39601929的博客
11-29 155
一、需求需求大概如下：点击按钮，弹出下拉菜单；点击下拉菜单以外的区域，隐藏菜单。实现效果如下，可以在线体验：CSS实现下拉菜单JS实现自然不难，不过很多时候能用CSS实现的话JS的方案就不考虑了，更何况CSS实现更加简单。二、实现dom结构如下：<这里使用了属性tabIndex，是为了利用focus伪类，正常状态下隐藏下拉菜单，在元素focus的时候，把下拉菜单显示出来；下拉部分使用绝对定位...
JS 自定义的悬浮窗被浏览器遮挡问题解决方案
最新发布
朝花夕拾的博客
07-20 475
遮挡问题解决思路，首先拿到外层的DOM元素div的宽高，然后根据鼠标悬浮事件的元素e e.clientX表距离页面窗口宽的位置 e.clientY代表距离页面窗口高的位置。如果clientHeight - e.clientY < 200 则让当前悬浮元素的top位置往上加200px 这样就不会被遮挡。同理 clientWdith - e.clientX < 200 则让当前悬浮元素的left位置往左减200px 就不会被遮挡。然后设置这个悬浮窗为200px。那个这个div的宽高。
使用 javascript 将鼠标指针移动到特定位置
迹忆客
07-01 2228
没有使用 JavaScript 更改鼠标位置的直接方法，因为它有一些缺陷。但是在编程中总是有不同的和非官方的做事方式。要解决鼠标指针移动到特定位置的问题，我们必须隐藏原来的鼠标指针。然后，我们有两个创建我们的自定义鼠标指针并编写一些 JavaScript 代码使其移动到特定位置。
JS实现点击下拉框改变背景颜色
xYY_X_xYY的博客
05-06 4472
使用onchange事件，当点击不同下拉框选项时，改变div背景颜色以及文字 效果展示 代码演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>onchange()</title> <style type="text/css"> #div { width: 300px; height
CSS: hover选择器的使用（实现鼠标悬浮效果，鼠标移上去div显示）
热门推荐
wujingj的博客
05-21 4万+
有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量用css解决，这样可以提高性能用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色a:hover { background-color:yellow; }用法2:使用a 控制其他块的样式：使用a控制a的子元...
JavaScript - 选项栏底色跟随鼠标移动而变化
Codefreyy
03-25 1702
//当鼠标经过某个li，就把current类（变红加下划线赋予给它） for (var i = 0; i < lis.length; i++) { var current = 0; //声明一个变量记录当前红色块的位置 lis[i].addEventListener('mouseenter', function () { move(cloud, this.offsetLeft);
JavaScript实现点击指定选项文字变红其他选项文字不变色
爱酷码的博客
12-30 2468
点击哪个h1标签让哪个字体变成红色（使用this） 代码如下 <body> <h1 onclick="z(this)">张三</h1> <h1 onclick="q(this)">李四</h1> <h1 onclick="r(this)">王五</h1> </body> <script> function z(z) { z.style.color="red"; .
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值