网页高手请问站内搜索代码

发布网友发布时间：2022-04-25 11:57

共4个回答

热心网友时间：2022-05-16 08:09

要用框架了，三个页面：

主页面 main.htm
<html>
<frameset rows="60,*">
<frame src="search.htm" name="search" id="search"/>
<frame src="content.htm" name="content" id="content"/>
</frameset>
</html>

顶部页面 search.htm
<html>
<head>
<SCRIPT language=JavaScript>
function findInPage(str) {
var pic = window.parent.frames["content"].document.all.tags("div");
var p;
if (pic.length > 0)
{
for(var i=0;i<pic.length;i++)
{
pic[i].style.border='';
if(pic[i].id==str)
{
p=pic[i];
}
}
}
if(p == null)
{
alert("未找到");
}
else
{
p.style.border='1px solid red';
p.scrollIntoView(true);
}
}
</SCRIPT>
</head>
<body>
<INPUT size="15" id="txt" value="1">
<INPUT type="button" value="页内搜索..." onclick="findInPage(txt.value);">
</body>
</html>

图片内容页 content.htm
<html>
<head>
</head>
<body>
<div id="1" style="height:100;">1<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="2" style="height:100;">2<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="3" style="height:100;">3<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="4" style="height:100;">4<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="5" style="height:100;">5<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="6" style="height:100;">6<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="7" style="height:100;">7<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="8" style="height:100;">8<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="9" style="height:100;">9<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
<div id="10" style="height:100;">10<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"></div>
</body>
</html>

热心网友时间：2022-05-16 09:27

不知道你这网页里面的图片是从数据库里调用出来的还是做的静态页面，不同的做法有不同的搜索方式，代码的写法也不一样，但是原理基本是差不多，做一个文本输入框，作为搜索关键字的查询接口，然后在页面上获取这个接口传过来的关键字与下面显示的图片进行对比，再判断显示与之相匹配的相应数据！
加你QQ你不在线，如果你还不什么明白的可以加我HI！
谢谢采纳！

热心网友时间：2022-05-16 11:01

很简单，这通过书签就可以实现，每个图片加个书签<a name="编号">编号</a>，输入框内输入数字之后跳转到书签即可

热心网友时间：2022-05-16 12:53

是这种效果么？

参考资料：http://www.gaoliying.com/info/

网页高手 请问站内搜索代码

网页高手请问站内搜索代码