喜悦国际村 » XML/HTML/CSS/Js » 一个JS问题

页: [1]
guog2007-8-29 08:35 AM
一个JS问题

我想得到一种效果，就是鼠标点下或划过下面显示相应此栏目的内容。
在网上找了几个代码，要么是firefox下不行，要么是ajax实现（这个太里面的难，短时间看不懂）。想要个简单的，我能够套用。能在IE和firefox兼容就行。那位做过相应的，给点代码，谢谢了

wzhu2007-8-29 08:39 AM
隐藏内容层
onmouseover = function(){ document.getElementById('id').style.display = "block"; }

村长夫人2007-8-29 09:48 AM
onmouseout = function(){ document.getElementById('id').style.display = "none"; }
否则内容层不会消失

guog2007-8-29 10:21 AM
<script language="JavaScript">
obj=Array("","test1","test2","test3");
div=Array("","test4","test5","test6");
function changeone(num){
     for(i=1;i<=3;i++){
          
           obj_this = document.getElementById(obj[i]);
          
           div_this = document.getElementById(div[i]);
           if(i == num){
             obj_this.background = "#FFFFFF";
                 div_this.style.display = '';
           }else{
             obj_this.background = "#FFFF04";
                 div_this.style.display = 'none';
           }
         }
  }
</script>
<body>
<table>
        <tr>
                <td id="test1" background="" onmouseover="changeone('1')"><a href="#">123</a></td>
                <td id="test2" background="" onmouseover="changeone('2')"><a href="#">456</a></td>
                <td id="test3" background="" onmouseover="changeone('3')"><a href="#">789</a></td>
        <tr>
<table>
<div id="test4" style="display:‘’">
        <table>
                <tr><td>qwer</td></tr>
        </table>
</div>
<div id="test5" style="display:'none'">
        <table>
                <tr><td>asdf</td></tr>
        </table>
</div>
<div id="test6" style="display:'none'">
        <table>
                <tr><td>zxcv</td></tr>
        </table>
</div>


我做了这个，怎么当鼠标移到后两个时，第一个层的老是出现，不会消失

迎风2007-8-29 10:37 AM
[url]http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm[/url]

guog2007-8-29 10:42 AM
[quote]原帖由 [i]迎风[/i] 于 2007-8-29 06:37 PM 发表
[url]http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm[/url] [/quote]

全英的:(。
现在问题快解决了，就差一点了，代码在上上楼，就是鼠标到后面的标题时候，第一个层的内容不会消失，现在头晕了，没有逻辑，那位帮忙看下，解决下。多谢了。

未注册会员2007-8-29 01:39 PM
[php]                                  <div class="jdetail">
                                        <ul>
                                                <li id="li_1" class="jactive" onmouseover="change(1);">详细介绍</li>
                                                <li id="li_2" onmouseover="change(2);">用户评价</li>
                                                <li id="li_3" onmouseover="change(3);">发表评论</li>
                                                <li id="li_4" onmouseover="change(4);">推荐给好友</li>
                                        </ul>

                                </div>
                                <script type="text/javascript">
                                        <!--
                                        function change(no)
                                        {
                                                for(var i = 1; i < 5; i++)
                                                {
                                                        if(no == i)
                                                        {
                                                                document.getElementById('id_'+i).style.display='block';
                                                                document.getElementById('li_'+i).style.color='#4A6901';
                                                                document.getElementById('li_'+i).style.backgroundImage='url("images/jnav.jpg")';
                                                        }
                                                        else
                                                        {
                                                                document.getElementById('id_'+i).style.display='none';
                                                                document.getElementById('li_'+i).style.color='#717171';
                                                                document.getElementById('li_'+i).style.backgroundImage='';
                                                        }
                                                }
                                        }
                                        document.getElementById('li_1').style.backgroundImage='url("images/jnav.jpg")';
                                        //-->
                                </script>
                                <div id="id_1" class="jdetail_content" style="display:block;">                       <!--内容切换-->
                                        详细介绍。。。。。。
                                </div>
                                <div id="id_2" class="jdetail_content">                       <!--内容切换-->
                                        用户评介。。。。。。
                                </div>

                                <div id="id_3" class="jdetail_content">                       <!--内容切换-->
                                        发表评论。。。。。。
                                </div>
                                <div id="id_4" class="jdetail_content">                       <!--内容切换-->
                                        推荐给好友。。。。。。
                                </div>[/php]前几天做shopex模板时写的，看下。


查看完整版本: 一个JS问题


Powered by Discuz! Archiver 6.1.0  © 2001-2006 Comsenz Inc.
Processed in 0.014689 second(s), 2 queries