问

javascript - js如何实现下面的功能

驺虞是白虎发布于 2022-12-01 06:53

描述你的问题
我想做一个类似于下面的搜索框，当用户输入一个值时，分别点击上面的选项会跳转至不同的链接、

如下图

例如，我输入qq，
点击上面的”新闻“，会跳转到news.sogou.com/?kw=qq
或者点击上面的”微信“，会跳转到hweixin.sogou.com/?kw=qq
或者点击上面的”问问“。会跳转到wenwen.sogou.com/?cid=qq
.........
请问当用户输入一个值时，分别点击上面的选项会跳转至不同的链接、用javascript+html怎么写。麻烦附完整的代码。谢谢。我是做美工的，

3 个回答

window.location.href = "你的url"

2022-12-01 07:10 回答

可怜小淖_135

js可以实现动态调整 form 的action值，html可以如下：

<div id="app-tab-nav">
    <a href="javascript:void(0);" data-name="news">新闻</a>
    <a href="javascript:void(0);" data-name="web">网页</a>
    <a href="javascript:void(0);" data-name="weixin">微信</a>
</div>
<form id="app-search" method="get">
    <input type="text" name="kw" />
    <button>搜狗搜索</button>
</form>

这里的导航菜单也可以动态生成，即在js脚本中使用变量定义，然后js予以输出。脚本假设使用 jQuery 书写。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    // 对象和变量
    var $appTabNavItem = $('#app-tab-nav a'),
        $appForm = $('#app-search'),
        navCurrent = 'current', // 选中高亮属性
        searchUrl = 'http://name.sogou.com/',
        formInt = 1; // 索引值，初始化选中“网页”选项
        
    // 初始化
    formCheck();
    
    // 鼠标事件
    $.each($appTabNavItem, function(i,thisItem){
        // 点击切换
        $(thisItem).on('click.tabNav', function(e){
            e.preventDefault();
            
            // 动态设置索引
            formInt = i;
            
            // 执行切换
            formCheck();
        });
    });
    
    // 创建一个函数，用于初始化和鼠标事件调用
    function formCheck(){
        // 列表条目高亮
        $appTabNavItem.removeClass(navCurrent)
        .eq(formInt)
        .addClass(navCurrent);
        
        // 调整表单的action值，此处拼接了一个字符串，并设置为form的action值
        $appForm.attr('action', searchUrl.replace('name',$appTabNavItem.eq(formInt).attr('data-name')));
    };
});
</script>

2022-12-01 07:10 回答

jg山家小屋

说下我的思路，输入框的onkeyup事件，获取输入框的值，再事件委托，改变href为原地址+关键字
demo如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<a href="http://www.qq.com/">新闻</a>
<a href="http://www.qq.com/">微信</a>
<input type='text'>
<button type='button'>搜索</button> 
</body>
<script type="text/javascript">
    var input=document.querySelector('input');
    var keyWord;
var btn=document.querySelector('button');
input.addEventListener('keyup',function(){
     keyWord=input.value;
},false);
document.addEventListener('click',function(e){
   e.preventDefault();//阻止默认跳转
   if(e.target.tagName=='A'){
       if(keyWord){
          location.href=e.target.href+keyWord;//加上关键字后重定向
        }else{
            location.href=e.target.href;
       }
   }
},false);
</script>
</html>

在线demo点这里这里，关于重定向后网址的构建规则，题主再看一下，每个网站不一样的

2022-12-01 07:10 回答

200433

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签