毕设项目中对功能进行划分,大约分为六类,这些都在主页的一个导航栏中,原来是打算,对每一个划分都作为一个链接,点击后跳转到另一个页面,但是现在主流网站大部分并非如此做法,例如:点击导航栏中的某一个按钮,而这个导航栏一般在整体页面上方或者左侧,点击按钮后,页面主体并未发生变化,发生变化的仅仅是下方或者右侧,称为子窗口。
实现原理:iframe标签,在一个合适的位置添加iframe标签,这里用的就是导航栏在上方,子窗口在下方的例子,如:
导航栏看自己喜好,关键的是button,onclick属性。
<li style="margin-right: 5px;background-color: #ffffff;"><a href="#" style="color: #000000" onclick="changeToMainPage()">首页</a>
</li>
<li style="margin-right: 5px;"><button class="dropdown-toggle" style="color:#fff;margin-left: 10px;background:none;border:0;cursor:pointer;position: relative;top: 11px;" type="button" onclick="changeToTeamTravel()">×××</button></li>
上方代码块中,onclick中涉及两个function,changeToMainPage()、changeToTeamTravel()。
子窗口代码块:id为iframe1。
<div class="row">
<iframe name="iframe1" id="iframe1" src="newworks.jsp" width="100%" height="100%">
</iframe>
</div>
js:获取id,更改其src。
<script language="JavaScript">
function changeToMainPage(){
var iframe1=document.getElementById("iframe1");
iframe1.src="/lv/mainpage/mainpage.jsp";
return true;
}
function changeToTeamTravel(){
var iframe1=document.getElementById("iframe1");
iframe1.src="help.jsp";
return true;
}
</script>