css_jsp制作页面选项卡

最新推荐文章于 2024-01-24 12:19:34 发布
最新推荐文章于 2024-01-24 12:19:34 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： JSP

当鼠标移动到哪一个选项卡标题上时候，会自动调用JSP代码，JSP代码的功能和作用是将类名.up和.blank从原来的地方（选项卡标题和选项卡内容）换到现在的地方 ，同时将原来的选项卡标题和选项卡内容中的类名修改为"  "

最后的效果如图所示：

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
     <style>
        *{
      padding:0;
      margin:0;
     }
     #tab
     {
      width:400px;
      position:relative;
      margin:0 auto;
      margin-top:100px;
     }
     #tab div
     {
      display:none;/*让选项卡内容在没有激活的时候不显示*/
      position:absolute;
      top:24px;/*选项卡标题的高度是24px*/
      left:0;
      width:398px;
      border:solid #d4d3d3;
      border-width:0 1px 1px;
     }
     #tab .blank
     {
      display:block;
      padding-bottom:10px;/*让激活的选项卡内容区域最低端的文字不贴着元素底部*/
     }
     #tab h3
     {
      width:98px;
      float:left;
      height:24px;
      border:1px solid #cccccc;
      text-align:center;
      font-size:14px;
      font-weight:normal;
      line-height:24px;
      background:url(images/51.jpg) no-repeat;
      cursor:pointer;/*让鼠标移动到选项卡标题上的时候变成手的形状*/
     }
     #tab .up
     {
      background:url(images/61.jpg) no-repeat;
     }
     #tab ul
     {
      margin:15px 0 0;/*让列表项文字离选项卡标题的下端远一点*/
      padding:0;
     }
     #tab ul,#tab li
     {
      list-style:none;
     }
     #tab li
     {
      width:47.9%;/*这里用百分比的作用可以解决IE6中的宽度解析问题*/
      height:22px;
      line-height:22px;/*这两行的作用是设置li的高度，并将li中的文字内容上下居中显示*/
      float:left;
      margin:0 1%;
      border-bottom:1px dashed #cccccc;
      text-indent:10px;
      display:inline;/*修改IE6中的双倍间距的bug问题*/
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow: hidden;/*这三行的作用是，如果li中的文字内容超过li的大小，则超出的部分用省略号显示*/     }
     #tab li a
     {
      font-size:12px;
      text-decoration:none;
      color:#333333;
      text-indent:10px;
     }
     #tab li a:hover
     {
      text-decoration:underline;
      color:red;
     }
     #tab a:hover h3
   {
       border:1px solid #cccccc;
    border-bottom:0px;
      }
      </style>
</head><body>
      <div id="tab">
      
          <!--选项卡标题开始-->
          <h3 class="up" οnmοuseοver="go_to(1);">选项一</h3>
          <!--选项卡标题结束-->
          <!--选项卡内容开始-->
          <div class="blank">
              <ul>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
                  <li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
              </ul>
          </div>
          <!--选项卡内容结束-->
          
          
          <!--选项卡标题开始-->
          <h3 οnmοuseοver="go_to(2);">选项二</h3>
          <!--选项卡标题结束-->
          <!--选项卡内容开始-->
          <div>
              <ul>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
                  <li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
              </ul>
          </div>
          <!--选项卡内容结束-->
          
          
          <!--选项卡标题开始-->
          <h3 οnmοuseοver="go_to(3);">选项三</h3>
          <!--选项卡标题结束-->
          <!--选项卡内容开始-->
          <div>
              <ul>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
                  <li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
              </ul>
          </div>
          <!--选项卡内容结束-->
          
          
          <!--选项卡标题开始-->
          <h3 οnmοuseοver="go_to(4);">选项四</h3>
          <!--选项卡标题结束-->
          <!--选项卡内容开始-->
          <div>
              <ul>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
                  <li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
              </ul>
          </div>
          <!--选项卡内容结束-->
          
      </div>
      <script type="text/javascript">
   <!--
   var h=document.getElementById("tab").getElementsByTagName("h3");
   var d=document.getElementById("tab").getElementsByTagName("div");
   function go_to(ao)
   {
    for(var i=0;i<h.length;i++)
    {
     if(ao-1==i)
     {
      h[i].className="up";
      d[i].className="blank";
     }
     else
     {
      h[i].className=" ";
      d[i].className=" ";
     }
    }
   }
   //-->
   </script>  
</body>
</html>
 思考：这种效果是鼠标移动到选项卡标题上的时候，选项卡内容就会自动变化，那么怎么设置当鼠标点击选项卡标题的时候选项卡内容才变换呢？很简单，只需要将每个h3中的οnmοuseοver="go_to(X);"修改为οnclick="go_to(X)"就可以了，X代表1到4
njit_java
关注
专栏目录
简单易用的JSP选项卡
06-27
选项卡制作，利用JS制作的选项卡，能够很快地导入到JSP页面中进行使用。通过该程序，对选项卡原理也有很深的认识。
漂亮的JSP TAB选项卡
10-15
很好用，很漂亮，我想你们一定会喜欢的吧，多多顶起哦
jsp 页面选项卡
yyongsheng的博客
04-28 2048
新增资源                      .radio.more_radio input[type="radio"]{                 margin-left:0;                 margin-top:4px;             }             input[type='checkbox']{               
jsp选项卡导航实现——模板
weixin_30925411的博客
01-19 693
效果 刚进来页面的样子 在第二个选项卡上方时 点击后 离开 同样第三个 点击 移走鼠标 代码 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <head> 3 <title>选项卡式导航</t...
jsp页面选项卡
weixin_33725722的博客
03-12 401
当鼠标移动到哪一个选项卡标题上时候，会自动调用JSP代码，JSP代码的功能和作用是将类名.up和.blank从原来的地方（选项卡标题和选项卡内容）换到现在的地方 ，同时将原来的选项卡标题和选项卡内容中的类名修改为" " 最后的效果如图所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
idea springboot 修改css,jsp不重启实现页面更新的问题
10-14
1. **Build project automatically**（自动构建项目）：在IDEA的顶部菜单栏，选择`File` -> `Settings`（或`Preferences` on macOS），然后在`Compiler`选项卡中勾选`Build project automatically`。这将使得IDEA在...
JSP选项卡显示
04-19
**JSP选项卡显示**是Web开发中常见的一种交互设计，用于在有限的空间内展示多个内容区域，用户可以通过切换不同的选项卡查看不同内容。在JavaServer Pages (JSP) 中实现这种功能，通常会结合HTML、CSS和JavaScript来...
jsp 2个css写的仿xp选项卡
10-07
在本案例中，我们讨论的是使用JSP和CSS技术来实现一个仿XP系统的选项卡功能。这种技术可以让用户在有限的页面空间内浏览多个相关的但内容独立的部分，提升网页的交互性和易用性。 首先，让我们深入理解JSP（Java...
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
10-27
在本文中，我们将探讨如何使用JavaScript和JSP来实现在鼠标移动到指定区域时显示选项卡，并在鼠标离开时将其隐藏的功能。这种交互式设计在网页开发中很常见，可以用于创建动态的导航菜单或工具提示。 首先，我们...
【JavaScript】实现网页中的选项卡
qq_55930097的博客
07-21 882
总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。
好看的选项卡样式
08-06
非常好看的选项卡样式，我今天刚封装的！
js如何实现选项卡功能
wangxuanyang_zer的博客
10-21 501
现在，当用户点击不同的选项卡时，相应的内容区域将会显示出来。这就是一个简单的选项卡功能实现。首先，我们需要创建一个包含多个选项卡的容器，以及每个选项卡对应的内容区域。接下来，我们需要编写一些CSS样式来美化选项卡和内容区域。可以将样式放在一个名为。编写JavaScript代码。
JS实现选项卡示例
blacop的博客
09-27 780
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty
jsp选项卡切换
frankfan123的博客
03-20 4504
最近在敲代码时遇到了选项卡切换的问题，即怎样在选项卡切换的同时改变选项卡的样式，使选项卡凸显出来。我尝试了单击事件onClick+addClass(),但是选项卡里有链接，点击的时候刷新了页面导致样式失效。我在网上找了很多方法都没有太好的效果，直到我找到了下面这个：先上选项卡代码： &lt;ul class="nav nav-tabs"&gt; &lt;li&gt;&lt;a href="$...
前端小案例——选项卡（HTML+CSS+JS, 附源码）
最新发布
前端小白一枚
01-24 2019
切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。
利用Java EE里jsp制作登录界面
weixin_30945039的博客
03-01 284
jsp连接数据库。百度经验。 1.在新建的Project中右键新建Floder 2.创建名为lib的包 3.创建完毕之后的工程目录 4.接下来解压你下载的mysql的jar包，拷贝其中的.jar文件 5.在工程lib包下邮件 选择paste即粘贴，把mysql的jar包拷贝进来 6.拷贝完毕 7.在mysql的jar包上右键选择 build path - add to build p...
一个简单的选项卡的demo
小迷糊的专栏
01-14 1814
因为刚接触jquery不久，好多都是用的别人的demo,现在也慢慢地学着自己写写，今天做了一个选项卡的简单的例子，整个例子写完之后感觉还是页面样式css更多与jquery。下面进入正题。在整个例子中就是样式的移除removeClass()与添加addClass()两个方法。很简单，下面附上自己的源码：       $(document).ready(functio
Java Web纯JSP方式实现用户登录功能
qq_64505257的博客
05-19 1222
JSP方式实现用户登录功能
JSP+JS 实现鼠标移动显示/隐藏选项卡的导航菜单实例
在本文档中，我们将深入探讨如何使用JSP和JavaScript实现鼠标移动到指定区域时动态显示选项卡，并在鼠标离开时自动隐藏。这通常用于创建用户友好的界面，提供更好的用户体验，例如网站的导航栏或者侧边栏功能。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值