cssx小结

最新推荐文章于 2024-10-09 20:00:56 发布

pioayang

最新推荐文章于 2024-10-09 20:00:56 发布

阅读量747

点赞数

分类专栏： css 文章标签： jsp css class java

本文链接：https://blog.csdn.net/pioayang/article/details/20053921

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 使用css定义

id="divId" —— #mydiv
class="divId" —— .mydiv
<p> —— p
<p><li><a> —— p li a

<script language="javascript" type="text/javascript">
    //点击网页中的事件
	$(document).ready(function(){
	    //点击网页中id=mydiv/<p><a>的点击事件
		$("#mydiv p a").bind('click', function(){ 
		    //如果点击事件不是这里
			$("#mydiv p a:not(this)").removeClass("top-menu-pt-hover");
			 //如果点击事件是这里
			$(this).addClass("top-menu-pt-hover");
		});
		
		 //点击网页中class=top-shezhi-img 的点击事件
		$(".top-shezhi-img").click(function(){
			$("#ulid").toggle();
		});
		
		$("#ulid li a").click(function(){
			$("#ulid").hide();
		});
		
		$("#pdiv").mouseleave(function(){
				$("#ulid").hide();
		});
	});
</script>	



<div id="mydiv">
     <p class="top-menu-pt"><a href="javascript:showMainXtsy()" class="top-menu-pt-hover"></a></p>
     <p class="top-menu-jc"><a href="javascript:showMain('2014021710384638769')"></a></p>
     <p class="top-menu-fk"><a href="javascript:showMain('2014021710391041532')"></a></p>
     <p class="top-menu-zj"><a href="javascript:showMain('2014021710401270221')"></a></p>
     <p class="top-menu-gl"><a href="javascript:showMain('2014021710410363531')"></a></p>
     <p class="top-menu-fx"><a href="javascript:showMain('2014021710411798655')"></a></p>
</div>

       <p class="top-shezhi"><a class="top-shezhi-img" style="cursor: pointer;">设置</a>
         <ul id="ulid" style="background: #fff;display:none;position:absolute;width:90px;right:100px;top:25px;*+top:25px;z-index:9999;">
             <div id="szid">
             <li style="line-height:25px; border-bottom:1px dashed #ededed;text-align:center;" >
             <a href="javascript:showMain('2014071318011271653')" style="color:#4d6dbe;text-decoration:none;">个人设置</a>
             </li>
             <li style="line-height:25px; border-bottom:1px dashed #ededed;text-align:center;">
             <a href="javascript:showMain('2009062410075328190')" style="color:#4d6dbe;text-decoration:none;">权限设置</a>
             </li>
		     <li style="line-height:25px; border-bottom:1px dashed #ededed;text-align:center;">
		     <a href="javascript:showMain('2009062410072752948')"  style="color:#4d6dbe;text-decoration:none;">用户设置</a>
		     </li>
		     <li style="line-height:25px; border-bottom:1px dashed #ededed;text-align:center;">
		     <a href="javascript:showMain('2009062410073796600')"  style="color:#4d6dbe;text-decoration:none;">菜单设置</a>
		     </li>
		     </div>
         </ul>
      </p>