超链显示TITLE到DIV，并可以切换。

数据库随机query出10条信息，组成一组超链，我想做到点击超链后，在新窗口打开一个网页($URL)，然后该链接的title显示在指定位置的 DIV里，<div class="showtitle">，然后点另一个链接后，DIV里的内容被切换成新链接的title。
<a href="'.$URL.'" onmouseout="document.getElementById(\''.$name.'\').style.display=\'none\'" onmouseover="document. getElementById(\''.$name'\').style.display=\'block\'"  title="'.$title.'" target="_blank">
我尝试用onmouseout，onmouseover来控制显示DIV，
但是问题是1：鼠标离开链接后，DIV里的文字随即消失。我想要的是点击后一直显示，直到有新的点击后被切换。
2：我尝试只用onmouseover，但是怎样给每个Id定名称，以确定这个DIV被打开、其他9个DIV被关闭？我尝试ID 为$name字段，但是如何判断呢？我的思路被DIV显示隐藏给框死了，谁有更好的方法可以帮我解决这个问题？
谢谢。 

解决方案 »

  1.   

    不明白你想要实现什么　
    在新窗口打开一个网页($URL)，然后该链接的title显示在指定位置的 DIV里　这个div是在新开的页面里面吗？
      

  2.   

    这个DIV是在当前页面里显示的，不是在新打开的页面里，要不就可以不同页面间传值了。
      

  3.   


    <style type="text/css">
    <!--
    .dd {
     display:none;
     z-index:10;
     position:absolute;
     border: 1px solid #FF0000;
     background-color: #cccccc;
     height:200;width:500;top:100;left:200;
    }
    -->
    </style>
    <div id="menodiv" class="dd">
    <input type="button" value="关闭" onclick="document.getElementById('menodiv').style.display = 'none';">
    <span id="divtitle"></span>
    </div>
    <a href="#" title="链接一" onmouseover="lo('链接一')">链接一</a>
    <a href="#" title="链接二" onmouseover="lo('链接二')">链接二</a>
    <a href="#" title="链接三" onmouseover="lo('链接三')">链接三</a>
    <a href="#" title="链接四" onmouseover="lo('链接四')">链接四</a>
    <a href="#" title="链接五" onmouseover="lo('链接五')">链接五</a>
    <a href="#" title="链接六" onmouseover="lo('链接六')">链接六</a>
    <script language="javascript">
    function lo(title)
    {
    document.getElementById('divtitle').innerText = title;
    document.getElementById('menodiv').style.display = 'block';
    }
    </script>
    不知道是不是你想要的效果　还是你定义了10个div？
      

  4.   


    <html>
    <head>
    <style type="text/css">
    .cls{height:100px;width:100px;}
    </style> 
    <script type="text/javascript" src="/Script/jquery-1.4.2.js">
    </script>
    <script type="text/javascript">
    $(function(){

    $("#111").click(function(){
    var kk=$("#111").attr("title");
    $("#funfun").html(kk);});$("#222").click(function(){
    var kk=$("#222").attr("title");
    $("#funfun").html(kk);});$("#333").click(function(){
    var kk=$("#333").attr("title");
    $("#funfun").html(kk);});
    });</script>
    </head>
    <body>
    <div id="funfun"></div>
    <a href="#" title="111" id="111">aaaaa</a>
    <a href="#" title="222" id="222">aaaaa</a>
    <a href="#" title="333" id="333">aaaaa</a>
    </body>
    </html>
      

  5.   

    感谢楼上的2位。
    3楼的必须在DIV里生一个关闭按钮才可以关闭切换吗？title=里的文字"链接一"并没有显示在DIV层里面。
    4楼的<a href="#" title="111" id="111">aaaaa</a>是数据库里随机query row的PHP的值不能传送到<script type="text/javascript">里面的吧，怎么定义$("#111")呢？（$("#111")的数据是 row["title"]的）
      

  6.   


    <style type="text/css">
    <!--
    .dd {
     display:none;
     z-index:10;
     position:absolute;
     border: 1px solid #FF0000;
     background-color: #cccccc;
     height:200;width:500;top:100;left:200;
    }
    -->
    </style>
    <div id="menodiv" class="dd">
        <span id="divtitle"></span>
    </div>
    <a href="#" title="链接一" onmouseover="lo('链接一')" onmouseout="document.getElementById('menodiv').style.display = 'none';" >链接一</a>
    <a href="#" title="链接二" onmouseover="lo('链接二')" onmouseout="document.getElementById('menodiv').style.display = 'none';">链接二</a>
    <a href="#" title="链接三" onmouseover="lo('链接三')" onmouseout="document.getElementById('menodiv').style.display = 'none';">链接三</a>
    <a href="#" title="链接四" onmouseover="lo('链接四')" onmouseout="document.getElementById('menodiv').style.display = 'none';">链接四</a>
    <a href="#" title="链接五" onmouseover="lo('链接五')" onmouseout="document.getElementById('menodiv').style.display = 'none';">链接五</a>
    <a href="#" title="链接六" onmouseover="lo('链接六')" onmouseout="document.getElementById('menodiv').style.display = 'none';">链接六</a>
    <script language="javascript">
    function lo(title)
    {
        document.getElementById('divtitle').innerHTML = title;
        document.getElementById('menodiv').style.display = 'block';
    }
    </script>