js DIV 链接问题

JavaScript09

js DIV 链接问题,第1张

div加链接这种方式在新窗口中打开链接是无法实现的，但是有如下方式实现。1、利用属性target，这种方式实用于用来实现，如下：新窗口打开测试链接2、利用window.open()打开，这种方式默认就是在新窗口中打开，如下：window.open('url')

首先知道超链接样式有4个属性：

a:link 定义正常链接的样式；

a:visited定义已访问过链接的样式；

a:hover 定义鼠标悬浮在链接上时的样式；

a:active 定义鼠标点击链接时的样式。

一般鼠标经过直接使用a:hover设定，

需要通过js来控制的一般是在点击后给超链接添加一个当前样式。

那么可以通过js或者jq给a标签添加一个当前class类，针对类写个当前样式即可。

举例【使用jq添加当前样式类】：

<div class="nav">

<ul class="menu" id="Jmenu">

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

jq:

$("#Jmenu li a").click(function(){

$("#Jmenu li a").removeClass("Curcss")//清除a上的curcss类

$(this).addClass("Curcss")//针对当前点击的a添加类

})

Css:

.Curcss{ background:#cccfont-size:16px....}//当前样式

你上面说了两个效果。。。。先给你一个效果。。看看。。

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

#aa{cursor:pointer}

 #box1{ width:400px}

 #bb{display:none margin-top:15px margin-left:15px}

  </style>

  <script type="text/javascript">

  document.getElementById(op).style.display="block"

 }

 function hide(op){

  document.getElementById(op).style.display="none"

 }

  </script>

</head>

<body>

<!--方法2-->

 <div id="box1">

   <div onmouseover="show('bb')" onmouseout="hide('bb')"  id="aa"><a href="cc.html" target="_blank">效果二</a></div>

   <div id="bb" style="border:1px #CCC solid">==鼠标经时，显示其下方隐藏的。  点击效果二,跳转页面至cc.html==</div>

 </div>  

</body>