html中怎么实现按钮跳转页面
4个回答
展开全部
按钮跳转相对来说算是比较简单，大概分两种方式操作：
图片/文字按钮
表单按钮
先说图片/文字按钮按钮：这种的话那就简单了，直接用a标签就可以实现了。
这种也分两种情况：
图片类型（如代码第1行）
文字类型（如代码第2行）
<a href="#"><img src="图片" /></a>
<a href="#">直接文字也可以</a>
图片可能看不太清楚，因为交互效果没出来，如果是在浏览器可以看到，图片和文字都是可以点击跳转的。
还有一种情况是表单按钮的方法，这种方法是直接提交到数据库的：
<form name="input" action="提交到的网址" method="get">
提交信息:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
图片能够大概的看出有表单框：
其他的方法也能实现，比如用JS、php等其他的语言也能实现，就不一一表现了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
试试 看好用不 跳转的页面是要自己写的 写好后把地址写到 action=“ 地址”里就行了
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
试试 看好用不 跳转的页面是要自己写的 写好后把地址写到 action=“ 地址”里就行了
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-06-19 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
html中实现按钮跳转页面是通过按钮追加js事件实现的。
1、比如有如下html：
<html>
<body>
<h1>测试button跳转</h1>
<input type="button" value="go" onclick="location.href='http://www.baidu.com'">
</body>
</html>
2、直接用confirm跳转。
<input type="button" value="go" onclick="if(confirm('确定跳转？')){location.href='
http://www.baidu.com'}">
1、比如有如下html：
<html>
<body>
<h1>测试button跳转</h1>
<input type="button" value="go" onclick="location.href='http://www.baidu.com'">
</body>
</html>
2、直接用confirm跳转。
<input type="button" value="go" onclick="if(confirm('确定跳转？')){location.href='
http://www.baidu.com'}">
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-07-28 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。
1）html的实现
代码如下:
<head>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
优点：简单
缺点：Struts Tiles中无法使用
2）javascript的实现
代码如下:
<mce:script language="javascript" type="text/javascript"><!--
setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>
优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响
3）结合了倒数的javascript实现（IE）
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>
优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3 ）结合了倒数的javascript实现（firefox）
代码如下:
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>
4）解决Firefox不支持innerText的问题
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
// --></mce:script>
5）整合3）和3'）
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById('totalSecond').innerText;
} else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
location.href='http://liting6680.blog.163.com/blog/hello.html';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
// --></mce:script>
以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法。
1）html的实现
代码如下:
<head>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
优点：简单
缺点：Struts Tiles中无法使用
2）javascript的实现
代码如下:
<mce:script language="javascript" type="text/javascript"><!--
setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>
优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响
3）结合了倒数的javascript实现（IE）
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>
优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3 ）结合了倒数的javascript实现（firefox）
代码如下:
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>
4）解决Firefox不支持innerText的问题
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
// --></mce:script>
5）整合3）和3'）
代码如下:
<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById('totalSecond').innerText;
} else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
location.href='http://liting6680.blog.163.com/blog/hello.html';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
// --></mce:script>
以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
