iOS label高亮点击点击高亮显示

转载

梦想启航吧 2023-08-02 13:27:39

文章标签 iOS label高亮点击 html 高亮 i++ 文章分类 iOS 移动开发

前段时间遇到了一个需求：访问页面时，跟该页面相关的Menu要求保持高亮。
因为是第一次遇到这个问题，在处理的时候走了不少弯路，后来在网络上搜索了一下，发现菜单高亮显示有几种不同层次的需求。
在下不才，在此将这几种需求以及各自的解决方案列出来，以作抛砖引玉之用，也希望后来遇到这种问题、并且看到我的帖子的朋友能从中获益。
代码是从项目中抽出来稍加修改而来，也许有的地方不够完善，大家一起探讨！

1、当鼠标移入后，菜单显示成高亮；移出后恢复
2、在1的基础上，单击某个菜单项，该项保持高亮（页面不刷新）
3、在1的基础上，单击某个菜单项，该项保持高亮（页面刷新）
4、当鼠标移入后，改变菜单的背景图片，与1效果类似

1、这是最基本的一步，基本上要求菜单高亮显示的，这个需求会同时存在；这里我们用CSS来解决这个需求；

<!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=gb2312"    />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<body>
     <div id="primarymenu" class="Pmenus">
     <ul>
         <li><a href="#"> Home </a></li>
         <li><a href="#"> Hotel </a></li>
         <li><a href="#"> Hotel Package </a></li>
         <li><a href="#"> Promotion </a></li>
         <li><a href="#"> My Booking </a></li>
         <li><a href="#"> Help </a></li>
         <li><a href="#"> Contact us </a></li>
         <li><a href="#"> Log Out </a></li>
     </ul>
     </div>
</body>
</html>

2、好，现在可以看到，第一点需求所要求的效果已经达到了，下面我们来实现第二个需求；这个就需要JS来实现了，简单一点，加入一段JavaScript

【注：这是引用的会员yangedie回答会员copier的方法，地址 http://bbs.blueidea.com/thread-2863419-1-1.html 】

<!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=gb2312"   />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i
<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
</script>
<body>
     <div id="primarymenu" class="Pmenus">
     <ul>
         <li><a href="#"> Home </a></li>
         <li><a href="#"> Hotel </a></li>
         <li><a href="#"> Hotel Package </a></li>
         <li><a href="#"> Promotion </a></li>
         <li><a href="#"> My Booking </a></li>
         <li><a href="#"> Help </a></li>
         <li><a href="#"> Contact us </a></li>
         <li><a href="#"> Log Out </a></li>
     </ul>
     </div>
</body>
</html>

3、OK，上面的页面不刷新的情况，一旦页面刷新，效果就没有了，这时候怎么办呢？没关系，我们尝试另外一段JS代码来达到这个效果，虽然代码有点长：

【这段代码也是我在网上搜索而来，但是对其中一些代码片段不敢苟同，因此做了修改；而且这段JS的扩展性不够好，每次使用都必须根据实际情况进行修改】

【这段代码只是做个示范，运行的话应该不会出现效果，实际的网站例子在5那边有链接】

<!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=gb2312"  />
<title>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i
<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
var tp;
var url = location.pathname+location.search;
var arr = new Array();
// 这里需要你输入一些自己的URL
arr.push( BASE_URL);
arr.push( BASE_URL + "home" );
arr.push( BASE_URL + "hotel" );
arr.push( BASE_URL + "package" );
arr.push( BASE_URL + "promotion" );
arr.push( BASE_URL + "mybooking" );
arr.push( BASE_URL + "help" );
arr.push( BASE_URL + "contactus" );
arr.push( BASE_URL + "user/login" );
arr.push( BASE_URL + "logout" );
for(i=0;i<arr.length;i++) {
if(url.lastIndexOf(arr[ i ]) > -1) {
tp=i;
}
}
var dv = document.getElementById("primarymenu");
var lk = dv.getElementsByTagName("a");
var link_index;
for(i=0;i<arr.length;i++) {
// 注意这里，与参考的资料上不一样，我做了改动【原先是获取lk的长度】
if(i == tp) {
switch(i) {
case 0:
case 1:
link_index = 0;
break;
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
link_index = i - 1;
break;
case 8:
case 9:
link_index = 7;
break;
}
}
}
lk[ link_index ].style.fontWeight="bold";
lk[ link_index ].style.color="#AD1788";
lk[ link_index ].style.background="#F9B7E7";
lk[ link_index ].style.padding="0 3px";
lk[ link_index ].className="focusurl";
</script>
<body>
     <div id="primarymenu" class="Pmenus">
     <ul>
         <li><a href="#"> Home </a></li>
         <li><a href="#"> Hotel </a></li>
         <li><a href="#"> Hotel Package </a></li>
         <li><a href="#"> Promotion </a></li>
         <li><a href="#"> My Booking </a></li>
         <li><a href="#"> Help </a></li>
         <li><a href="#"> Contact us </a></li>
         <li><a href="#"> Log Out </a></li>
     </ul>
     </div>
</body>
</html>

上面新添加的JS，会根据你访问的不一样的URL，分别使对应的菜单获得style修饰，因此必须根据你的实际情况进行修改

4、鼠标移入更改背景图片，其实跟上面的都不太一样，只不过有一些相似之处，也放到这里吧

<STYLE>
.setUrl  { background-image: url(sphere.jpg) }
.loseUrl { background-image: url(none) }
</style>
</head>
<BODY>
<SPAN onmouseover="this.className='setUrl'" onmouseout="this.className='loseUrl'"> . . . </span>

5、最后，如果你需要使菜单横向排列的话，在CSS里加入这一行

li {float:left;list-style-type: none;padding:0px;}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：android进程权限 android进程管理机制

下一篇：mysql主键外键语句 mysql中主键和外键的区别

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

iOS label高亮点击 点击高亮显示

iOS label高亮点击 点击高亮显示

51CTO博客

iOS label高亮点击点击高亮显示

iOS label高亮点击点击高亮显示