首页 前端知识 javaEE5(javascript/jquery附加作业(选做))

javaEE5(javascript/jquery附加作业(选做))

2024-03-20 11:03:27 前端知识 前端哥 696 575 我要收藏

在网页结尾嵌入一段javascript/jquery代码,作用:将网页中所有粗体字(strong标签包裹的文字)以链接方式提取出来作为提纲,放到页面右上角,点击它,文章定位到相应位置(附件两个文件可作为实验素材),效果如课程网站。以附件形式提供该段代码。

提示:锚记(书签)的建立和跳转方法见html中超链接一节。

  1. 一个项目中包含一个菜单页面menu.jsp,和几个主页面c.jsp,python.jsp,java.jsp,javaweb.jsp,每个主页面中都要显示菜单。要求活动菜单项有所区分,比如本网站的活动链接下有下划线。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

    <style>

        *padding:0margin:0; }

        body{overflow-y: auto;}

        .content .item{

            width:100%;height:500px;margin-bottom:20px;border:1px solid #999;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

        .nav_list{

            position: fixed;

            right:0;

            top:20%;

            min-width:200px;

            padding:10px 20px;

            border-radius: 10px;

        }

        .nav_list .item{

            padding:5px 0;

            border-left: 2px solid #ccc;

        }

        .nav_list .item.active,

        .nav_list .item:hover{

            border-left-color:cornflowerblue ;

        }

        .nav_list .item a{

           

            text-decoration: none;

        }

        .nav_list .item.active a{

            color:cornflowerblue;

        }

    </style>

</head>

<body>

<div class="content">

    <div class="item" id="box1"><h1><strong id="strong0"></strong></h1></div>

    <div class="item" id="box2"><h1><strong id="strong1"></strong></h1></div>

    <div class="item" id="box3"><h1><strong id="strong2"></strong></h1></div>

    <div class="item" id="box4"><h1><strong id="strong3"></strong></h1></div>

</div>

<ul class="nav_list" id="ulid">

    <li class="item active"><a href="#box1"></a></li>

    <li class="item"><a href="#box2"></a></li>

    <li class="item"><a href="#box3"></a></li>

    <li class="item"><a href="#box4"></a></li>

</ul>

<script type="text/javascript">

var a=$("strong");

var s="";

 for(i=0;i<a.length;i++){

       a[i].id="strong"+i;

       $("#strong"+i).before($("<div class='item' id='box"+i+"'></div> "));

      if(a[i].innerText.trim()!="")

       s=s+"<li><a href='#box"+i+"'>"+a[i].innerText+"</a><li>";

 }

 $("#ulid").html(s);

</script>

</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3949.html
标签
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!