JS里实现页面跳转

<select id="identity" name="#">
                <option name="#" id="#" value="admin">管理员</option>
                <option name="#" id="#" value="leader">领导</option>
                <option name="#" id="#" value="staff">员工</option>
                </select>

 有时候我们需要通过一个按钮,或者说一个下拉列表框来实现页面跳转,方法其实有很多,我举一下我常用的方法:

①按钮跳转<input type="button">:

<input type="button" name="#" id="#" onclick="window.location.href='index.html'" />

注意:将input设置为button类型,通过onclick(点击触发事件)实现跳转到index.html页面;

②下拉列表框<select>

HTML代码如下:

<select id="identity" name="#">
                <option name="#" id="#" value="admin">管理员</option>
                <option name="#" id="#" value="leader">领导</option>
                <option name="#" id="#" value="staff">员工</option>
                </select>

JS代码如下:

 <!--
function login(){
	  var identity=document.getElementById("identity").value;
	if(identity=="admin"){
		window.location.href="../web/admin_main.html";
	}else if(identity=="leader"){
		window.location.href=("../web/leader_main.html");
	}else if(identity=="staff"){
		window.location.href=("../web/staff_main.html");
		}
	}

  //-->

  根据选择下拉列表框中不同的值,来实现跳转到不同的页面;

注意(自己犯的错):获取表单的值时,记得在最后面增加.value,比如:getElementById("identity").value

③番外:

如果你在主页面采用了框架(<frame>),跳转页面如果不指定对应的框架,则默认为在当前框架;通常你会遇到这样一个问题,比如你在主页面想退出到登陆页面,你想的是全屏显示登陆页面,然而并非如此,它就在你点击退出的那个框架显示了登录页面,这样显示出来的页面并不完全,想全屏显示,有如下两种方式:

window.parent.location.href="../login/login.html"
window.open("../login/login.html","_parent");

猜你喜欢

转载自ye-wolf.iteye.com/blog/2302838