友情链接(下拉列表)

本文介绍了一种使用JavaScript实现的下拉菜单自动跳转功能,通过<script>标签内定义的函数和<select>元素结合,实现了用户选择选项后页面自动跳转到指定链接的效果。
摘要由CSDN通过智能技术生成

<script language="javascript">
function go()
{
 location.href=document.form1.goo.value;
}
</script>
<form name="form1">
  <select name="goo" class="bottom_border" onChange="go()">
    <option>友情链接网站名称</option>  

    <option value="http://www.baidu.com/">百度</option>       

    <option value="http://www.google.com/">谷歌</option>             

  </select>
</form>

转载于:https://www.cnblogs.com/X-Jonney/archive/2009/06/01/1493474.html

很抱歉,我无法编写出完整的网页,但是我可以提供一些代码和思路供您参考。 首先是 HTML 代码,其中包含了导航菜单、登录和注册表单、友情链接和版权信息等内容: ```html <!DOCTYPE html> <html> <head> <title>动漫网</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">动画</a> <ul> <li><a href="#">国内动画</a></li> <li><a href="#">日本动画</a></li> <li><a href="#">欧美动画</a></li> </ul> </li> <li><a href="#">漫画</a> <ul> <li><a href="#">国内漫画</a></li> <li><a href="#">日本漫画</a></li> <li><a href="#">欧美漫画</a></li> </ul> </li> <li><a href="#">游戏</a> <ul> <li><a href="#">手机游戏</a></li> <li><a href="#">电脑游戏</a></li> <li><a href="#">主机游戏</a></li> </ul> </li> <li><a href="#">音乐</a> <ul> <li><a href="#">动漫音乐</a></li> <li><a href="#">游戏音乐</a></li> <li><a href="#">Vocaloid</a></li> </ul> </li> <li><a href="#">关于</a></li> </ul> </nav> <div id="login-form"> <form> <label>用户名:</label><input type="text" name="username"> <label>密码:</label><input type="password" name="password"> <input type="submit" value="登录"> </form> <a href="#">注册</a> </div> </header> <main> <h1>欢迎来到动漫网</h1> <p>这是一个关于动漫的网站,我们提供最新的动画、漫画、游戏和音乐资讯。</p> <ul> <li><a href="#">最新动画推荐</a></li> <li><a href="#">最新漫画推荐</a></li> <li><a href="#">最新游戏推荐</a></li> <li><a href="#">最新音乐推荐</a></li> </ul> <form> <label>邮箱:</label><input type="email" name="email"> <label>留言:</label><textarea name="message"></textarea> <input type="submit" value="提交"> </form> </main> <footer> <p>友情链接:<a href="#">ACG玩家社区</a> | <a href="#">二次元动漫网</a> | <a href="#">ACG动漫网</a></p> <p>© 2021 动漫网</p> </footer> </body> </html> ``` 其中,二级下拉导航菜单使用了 HTML 嵌套列表和 CSS 伪元素实现。登录和注册表单预留了空间,需要使用 JavaScript 实现相关功能。留言表单使用了 HTML 表单元素,并需要使用后端技术实现提交和保存。 接下来是 CSS 代码,用于设置网页的样式: ```css /* 全局样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; } /* 导航菜单样式 */ nav ul { list-style: none; display: flex; justify-content: center; } nav ul li { position: relative; margin: 0 10px; } nav ul li a { display: block; padding: 10px; text-decoration: none; color: #333; } nav ul li ul { position: absolute; top: 40px; left: 0; background-color: #fff; padding: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); display: none; } nav ul li:hover ul { display: block; } nav ul li ul li { margin: 5px 0; } nav ul li ul li a { font-size: 14px; } /* 登录和注册表单样式 */ #login-form { margin-left: auto; } #login-form form { display: flex; align-items: center; } #login-form label { margin-right: 5px; } #login-form input[type="text"], #login-form input[type="password"] { padding: 5px; border: 1px solid #ccc; border-radius: 3px; } #login-form input[type="submit"] { padding: 5px 10px; margin-left: 5px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } #login-form a { margin-left: 10px; text-decoration: none; color: #333; } /* 友情链接和版权信息样式 */ footer { background-color: #f5f5f5; padding: 10px; text-align: center; } footer p { margin: 5px 0; } footer a { color: #007bff; text-decoration: none; } ``` 最后是 JavaScript 代码,用于实现登录和注册表单的交互: ```javascript // 获取登录和注册表单元素 var loginForm = document.querySelector('#login-form form'); var registerLink = document.querySelector('#login-form a'); // 为登录表单添加提交事件 loginForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单元素 var username = this.elements['username']; var password = this.elements['password']; // TODO: 调用后端接口验证用户名和密码 alert('登录成功'); }); // 为注册链接添加点击事件 registerLink.addEventListener('click', function(event) { event.preventDefault(); // 阻止链接默认跳转行为 // TODO: 弹出注册表单或跳转到注册页面 }); ``` 以上代码仅供参考,具体实现需要根据实际需求和技术栈进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值