描述你的问题
我想做一个类似于下面的搜索框,当用户输入一个值时,分别点击上面的选项会跳转至不同的链接、
如下图
例如,我输入qq,
点击上面的”新闻“,会跳转到news.sogou.com/?kw=qq
或者点击上面的”微信“,会跳转到hweixin.sogou.com/?kw=qq
或者点击上面的”问问“。会跳转到wenwen.sogou.com/?cid=qq
.........
请问当用户输入一个值时,分别点击上面的选项会跳转至不同的链接、用javascript+html怎么写。麻烦附完整的代码。谢谢。我是做美工的,
描述你的问题
我想做一个类似于下面的搜索框,当用户输入一个值时,分别点击上面的选项会跳转至不同的链接、
如下图
例如,我输入qq,
点击上面的”新闻“,会跳转到news.sogou.com/?kw=qq
或者点击上面的”微信“,会跳转到hweixin.sogou.com/?kw=qq
或者点击上面的”问问“。会跳转到wenwen.sogou.com/?cid=qq
.........
请问当用户输入一个值时,分别点击上面的选项会跳转至不同的链接、用javascript+html怎么写。麻烦附完整的代码。谢谢。我是做美工的,
window.location.href = "你的url"
js可以实现动态调整 form
的action值,html可以如下:
<code><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></code>
这里的导航菜单也可以动态生成,即在js脚本中使用变量定义,然后js予以输出。脚本假设使用 jQuery
书写。
<code><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></code>
说下我的思路,输入框的onkeyup事件,获取输入框的值,再事件委托,改变href为原地址+关键字
demo如下:
<code> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <a href="http://www.qq.com/">新闻</a> <a href="http://www.qq.com/">微信</a> <input type="text"> <button type="button">搜索</button> <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> </code>
在线demo点这里这里,关于重定向后网址的构建规则,题主再看一下,每个网站不一样的