初窥——进入公司后的JAVA_WEB开发04_锚链接使用

一、简介:公司项目中有显示某些文章或某些长内容，显示的时候，内容过多显得繁琐。需要做类似于百度百科的链接跳转。

二、开发过程：

1.为文章添加锚链接，类似于百度百科的右侧时间轴，使文章能够跳转位置：

jsp代码如下：

<!--时间轴-->

<c:if test="${not empty dto.results.diseaseDet }">

<c:forEach var="diseaseDet" items="${dto.results.diseaseDet}" varStatus="index">

<div class="clearfix">

<label class="cp">

<a class="a_gray_blue" href="#${diseaseDet.science_theme}" οnclick="changeStyle(this);">

<img class="fl mt5 ml5 imgstyle_fx" src="<c:url value='/imgs/health/circle_gray.png'/>"/>

<span class="fl ml30">

<c:out value="${index.index+1}"></c:out>.<span class="ml10">${diseaseDet.science_theme}</span>

</span>

</a>

</label>

</div>

<!-- 对长度进行判断是否显示连接 -->

<c:if test="${index.index < dto.results.diseaseDet.size()-1}">

<div class="short_line1 mt5 mb5"></div>

</c:if>

</c:forEach>

</c:if>

注： 注：此处代码应注意循环中，判断长度，如果是倒数第二位前就可以输出，判断list长度，应注意。

2.js代码片段：

  function changeStyle(obj){

$(".imgstyle_fx").attr("src",$WEB_ROOT_PATH+"/imgs/health/circle_gray.png");

$(obj).children(':first').attr("src",$WEB_ROOT_PATH+"/imgs/health/circle_blue.png");

}

3.实现效果：

三、总结：

1.锚链接的介绍也有很多使用也很方便，最初的问题是怎么让竖线少循环输出一次，计算list的长度才能解决这个问题。

2.另一个地方是，jquery控制img的属性，可以改变图片，这就避免了重新再去刷新页面。