求点击改变内容的代码(要求能通过IE8安全保护)
如下代码默认为百度搜索:
- HTML code
<table> <tr> <td><table width="100%"> <tr align="center" id="controller"> <td style="background-color:#0FF">网页</td> <td>知道</td> <td>谷歌图片</td> <td>淘宝</td> </tr></table></td> </tr> <tr> <td id="searcher"><form action="http://www.baidu.com/s" target="_blank"> <input name="word" type="text" value="" /> <input type="submit" value="百度一下" /> </form></td> </tr></table>
怎样实现选择点击“知道”、“谷歌图片”、“淘宝”后,其单元格颜色变为#0FF,搜索内容也相应改变?如,点击“谷歌图片”后的效果:
- HTML code
<table> <tr> <td><table width="100%"> <tr align="center" id="controller"> <td>网页</td> <td>知道</td> <td style="background-color:#0FF">谷歌图片</td> <td>淘宝</td> </tr></table></td> </tr> <tr> <td id="searcher"><form action="http://www.google.com.hk/search" target="_blank"><input name="q" type="text" value="" /><input type="hidden" name="tbm" value="isch"><input type="submit" value="搜索图片" /></form></td> </tr></table>
另外还要求在IE8等浏览器中不要出现脚本或ActiveX控件被默认阻止的情况。还有,网页没有完全加载完毕时,放在网页前面的这段代码要能正常运行。
[解决办法]
调整了下,基本是这样,具体你再改下
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <title></title> </head> <body> <table> <tr> <td><table width="100%"> <tr align="center" id="controller"> <td style="background-color:#0FF">网页</td> <td>知道</td> <td>谷歌图片</td> <td>淘宝</td> </tr> </table> </td> </tr> <tr> <td> <table width="100%"> <tr id="controller_search"> <td id="searcher"> <form action="http://www.baidu.com/s" target="_blank"> <input name="word" type="text" value="" /> <input type="submit" value="百度一下" /> </form> </td> <td id="searcher" style="display:none;"> <form action="http://www.google.com.hk/search" target="_blank"> <input name="q" type="text" value="" /> <input type="hidden" name="tbm" value="isch"> <input type="submit" value="搜索图片" /> </form> </td> <td id="searcher" style="display:none;"> <form action="http://www.baidu.com/s" target="_blank"> <input name="word" type="text" value="" /> <input type="submit" value="谷歌" /> </form> </td> <td id="searcher" style="display:none;"> <form action="http://search8.taobao.com/search?q" target="_blank"> <input name="q" type="text" value="" /> <input type="submit" value="淘宝一下" /> </form> </td> </tr> </table> </td></tr></table><script type="text/javascript"> jQuery('#controller td').click(function(){ var curIndex = jQuery(this).index(); jQuery(this).css('background-Color','#0FF'); jQuery(this).siblings().css('background-Color',''); jQuery('#controller_search td').eq(curIndex).css("display","block"); jQuery('#controller_search td').eq(curIndex).siblings().css("display","none"); }); </script> <div> </div> </body> </html>