！求助！jsp页面动态改变所播放视频的连接，同时菜单栏样式改变的问题！

这个是页面的样式：
我的需求是这样的，比如我点击 ”跨行账户明细查询“ 这个选项，在点击的同时右边播放它所对应的URL视频连接，同时它的样式就变成选中的样式“此处是className="on"”。当我在点击“跨行单笔资金归集”他的样式变成className="on"，而”跨行账户明细查询“这个选项就恢复它原来的样式 ，就大神高抬贵手，教教我吧！下面是我的jsp的代码！
这个功能我也写了js代码，但没实现。我该怎么改啊！？？？<%@ page language="java" errorPage="/error.jsp"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!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" />
<link rel="stylesheet" type="text/css"
href="<c:url value='/styles_n1/base.css'/>" />
<link rel="stylesheet" type="text/css"
href="<c:url value='/styles_n1/module.css'/>" />
<script type="text/javascript" language="javascript">
var video = document.getElementById("videoId");
var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");
var video3 = document.getElementById("video3");
var video4 = document.getElementById("video4");
var video5 = document.getElementById("video5"); video1.onclick = changeStyle(1, "url1");
video2.onclick = changeStyle(2, "url2");
video3.onclick = changeStyle(3, "url3");
video4.onclick = changeStyle(4, "url4");
video5.onclick = changeStyle(5, "url5"); function changeStyle(vodeoNum, urlNum){
var str = urlNum;
var a = str.split("");
var resultStr = a[(a.length - 1)];
for ( var id = vodeoNum; id <= 5; id++) {
if (id == vodeoNum && id == parseInt(resultStr)) {
alert(vodeoNum, urlNum);
document.getElementById("video" + id).className = "on";
document.getElementById("videoId").src = returnUrl(resultStr);
} else {
document.getElementById("video" + id).className = "";
}
}
}
function returnUrl(resultNum){
if(1==resultNum){
return "http://player.youku.com/embed/XNDkwMzYzOTc2";
}if(2==resultNum){
return "http://player.youku.com/embed/XNDkwMzYzNDAw";
}if(2==resultNum){
return "http://player.youku.com/embed/XNDkwMzY0MDk2";
}if(2==resultNum){
return "http://player.youku.com/embed/XNDkwMzYzNzky";
}if(2==resultNum){
return "http://player.youku.com/embed/XNDkwNzc3MjIw";
}
}

</script>
</head><body>
<div class="info3 cfx">
<li class="title">操作视频</li>
<div class="fl">
<ul>
<li><a><span id="video1" class="on">银行登录过程</span></a></li>
<li><a><span id="video2" ">跨行账户明细查询</span></a></li>
<li><a><span id="video3">跨行单笔资金归集</span></a></li>
<li><a><span id="video4">跨行批量资金归集</span></a></li>
<li><a><span id="video5">跨行资金归集复核</span></a></li>
</ul> 
</div>
//这里是页面播放视频的默认地址，我们要动态的改变这个地址
<div class="fr"><iframe id="videoId" height=500 width=600
frameborder=0 src="http://player.youku.com/embed/XNDkwMzYzOTc2"
allowfullscreen></iframe></div>
</div>
<div class="info2">
<ul>
</ul>
</body>
</html>