投稿
  1. 首页
  2. 随笔

html如何获取对象标签后显示高亮

电脑之家 • 2023-4-4 • 随笔 • 阅读 14

html如何获取对象标签后显示高亮,第1张

在web开发中会遇到这样一个问题：当你点击某一个导航时，就让他高亮显示，其他的默认。

可以用一下两种方法解决：

1，在每一个文件中都引入头部，然后为不同的链接添加样式

缺点：比较麻烦，如果要修改样式，每个文件都要修改

2，把头部提出来，用js判断url地址，然后给当前的url加上样式（用js控制的）

<!--导航条高亮---

<!---以下是html部分，给div添加一个id--

<div class="nav_nav"

id="tabs_nav"

<a href="/"

class="active"公司首页</a<ahref="/product/product.php"

公司简介</a<ahref="/shop/map.php"雅酷地图</a<b</b<ahref="/shop/shop.php"合作商户</a<ahref="/shop/shop_search.php"商户搜索</a</div

<!---以下是js部分--

<script type="text/javascript"

//获取div下面所有的a标签（返回节点对象）

var myNav =

document.getElementByIdx_x("tabs_nav").getElementsByTagName_r("a")

//获取当前窗口的url

var myURL = document.location.href

//循环div下面所有的链接，

for(var i=1i<myNav.lengthi++){

//获取每一个a标签的herf属性varlinks = myNav[i].getAttribute("href")

var myURL =

docu...在web开发中会遇到这样一个问题：当你点击某一个导航时，就让他高亮显示，其他的默认。

可以用一下两种方法解决：

1，在每一个文件中都引入头部，然后为不同的链接添加样式

缺点：比较麻烦，如果要修改样式，每个文件都要修改

2，把头部提出来，用js判断url地址，然后给当前的url加上样式（用js控制的）

<!--导航条高亮---

<!---以下是html部分，给div添加一个id--

<div class="nav_nav"

id="tabs_nav"

<a href="/"

class="active"公司首页</a<ahref="/product/product.php"

公司简介</a<ahref="/shop/map.php"雅酷地图</a<b</b<ahref="/shop/shop.php"合作商户</a<ahref="/shop/shop_search.php"商户搜索</a</div

<!---以下是js部分--

<script type="text/javascript"

//获取div下面所有的a标签（返回节点对象）

var myNav =

document.getElementByIdx_x("tabs_nav").getElementsByTagName_r("a")

//获取当前窗口的url

var myURL = document.location.href

//循环div下面所有的链接，

for(var i=1i<myNav.lengthi++){

//获取每一个a标签的herf属性varlinks = myNav[i].getAttribute("href")

var myURL =

document.location.href

//查看div下的链接是否包含当前窗口，如果存在，则给其添加样式

if(myURL.indexOf(links)!= -1){

myNav[i].className="active"

myNav[0].className=""}}

这个很有用，以后会用到~！

楼主，给你一段ASP站内搜索关键词着色的代码。你看一下就明白怎么来实现了！

<!--#include file="conn.asp"-->

<!------------------------------------

Asp站内搜索的关键字上色！

------------------------------------->

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>设计自己的搜索网站</title>

<style type="text/css">

<!--

body,td,th {

font-size: 12px

}

-->

</style>

<script type="text/javascript">

function Checktext()

{

if (document.from.text.value.length == 0 )

{

alert("搜索关键字不能为空！")

document.from.text.focus()

return false

}

return true

}

</script>

</head>

<body>

<form action="?act=search" name="from" method="post" onClick="return Checktext()">

<input name="text" type="text" id="text" />

<input type="submit" name="Submit" value="搜索" />

</form>

</body>

</html>

<%

function FontToColor(Str)

'定义一个字符转换的过程

if not isnull(str) then

str = replace(str,request("text"),"<font color=red>"&request("text")&"</font>")

'转换str中符合request("text")的字符为 <font color=red>字符</font>

FontToColor = str

end if

end function

if request("act")="search" then

set rs=server.CreateObject("adodb.recordset")

rs.open"select * from list where text like '%"&request("text")&"%' order by time desc",conn,1,1

if rs.eof and rs.bof then

response.write"没有记录!"

response.end

else

do while not rs.eof

response.write"<table width='600' border='0' cellspacing='0' cellpadding='0'><br><tr width='600'><td>"

response.write FontToColor(rs("text"))

'查找rs("text")中包含的request("text")字符，并替换

response.write"</td></tr>"

rs.movenext

loop

rs.close

set rs=nothing

end if

end if

%>

给你做 第一个，用的是css3和js实现的。

下面的3个都可以用js实现，如果要做的好看一点的话，可以用jquery或者其他的组件

<!DOCTYPE html>

<html>

<head>

<style> 

.move 

{

width:100px

height:100px

background:red

position:relative

animation-name:myfirst

animation-duration:5s

animation-timing-function:linear

animation-delay:0

animation-iteration-count:infinite

animation-direction:alternate

animation-play-state:paused

/* Firefox: */

-moz-animation-name:myfirst

-moz-animation-duration:5s

-moz-animation-timing-function:linear

-moz-animation-delay:0

-moz-animation-iteration-count:infinite

-moz-animation-direction:alternate

-moz-animation-play-state:paused

/* Safari and Chrome: */

-webkit-animation-name:myfirst

-webkit-animation-duration:5s

-webkit-animation-timing-function:linear

-webkit-animation-delay:0

-webkit-animation-iteration-count:infinite

-webkit-animation-direction:alternate

-webkit-animation-play-state:paused

/* Opera: */

-o-animation-name:myfirst

-o-animation-duration:5s

-o-animation-timing-function:linear

-o-animation-delay:0

-o-animation-iteration-count:infinite

-o-animation-direction:alternate

-o-animation-play-state:paused

}

@keyframes myfirst

{

0%   {background:red left:0px top:0px}

25%  {background:yellow left:200px top:0px}

50%  {background:blue left:200px top:200px}

75%  {background:green left:0px top:200px}

100% {background:red left:0px top:0px}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background:red left:0px top:0px}

25%  {background:yellow left:200px top:0px}

50%  {background:blue left:200px top:200px}

75%  {background:green left:0px top:200px}

100% {background:red left:0px top:0px}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red left:0px top:0px}

25%  {background:yellow left:200px top:0px}

50%  {background:blue left:200px top:200px}

75%  {background:green left:0px top:200px}

100% {background:red left:0px top:0px}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background:red left:0px top:0px}

25%  {background:yellow left:200px top:0px}

50%  {background:blue left:200px top:200px}

75%  {background:green left:0px top:200px}

100% {background:red left:0px top:0px}

}

.c{

position: absolute

width:300px

height: 300px

border:solid 1px red

}

</style>

</head>

<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div class="c">

<div class="move" id="move"></div>

</div>

</body>

<script>

window.onload = function(){

document.getElementById("move").onclick = function(){

this.style.animationPlayState = "running"

}

}

</script>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7350952.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
电脑之家 电脑之家 一级用户组
0 0
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表（0条）

保存