【求助】简单js不会改

Question

原本是鼠标放上面，内容区出现相应的文本，现在想改成，点击以后，内容区出现相应的文本，怎么改啊？
我是菜鸟，只会把mouseover改成mouseclick，但是没用也！！原来的：<DIV id=IDN_A class=tt>
<A class=on href="#">社联新闻</A>
<A href="#">社团新闻</A></DIV>
<DIV id=IDN_A_CONTENT class="jtjs_box box1">
<A href="#"><IMG style="FLOAT: left" src="images/news3.jpg"></A>
<DIV class="newslist">
<LI><A href="#">大学生社团联合会第九届社团推荐会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI></DIV>
<DIV class="newslist" style="DISPLAY: none">
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">我校第九届社团推介会隆重举行</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">校大学生社团联合会举行第七届学生社团表彰大会</A><SPAN>2011-12-15</SPAN></LI>
<LI><A href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</A><SPAN>2011-12-15</SPAN></LI>
</DIV></DIV>
<SCRIPT type=text/javascript>
$(document).ready(function(){
    $("#IDN_A > a").mouseover(function(){
    $("#IDN_A > a").removeClass("on");
$(this).addClass("on");
$("#IDN_A_CONTENT > div").hide();
$("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
});
})
</SCRIPT>
</DIV>
更改的：<div class="page-left" style="margin-top:10px;">
<div class="page-left lefttitle"></div>
<ul><li><a href="#" class="on" id=IDN_A>社联新闻</a></li><li><a href="#" id=IDN_A>社团新闻</a></li></ul>
</div><div id=IDN_A_CONTENT class="page-right">
<div class="righttitle"><h1>社联新闻</h1></div>
<ul><li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><img src="../images/19.gif"/><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
</ul></div>
<div class="page-right" style="DISPLAY: none">
<div class="righttitle"><h1>社团新闻</h1></div>
<ul><li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><img src="../images/19.gif"/><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
</ul></div>
<SCRIPT type=text/javascript>
$(document).ready(function(){
    $("#IDN_A > a").mouseclick(function(){
    $("#IDN_A > a").removeClass("on");
$(this).addClass("on");
$("#IDN_A_CONTENT > div").hide();
$("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
});
})
</SCRIPT>

Answer 1

我没看内容了，就按你前面说的，mouseover 应该改为 click

Answer 2

jquery对象没有mouseclick函数，你可以改成.click或者绑定bind鼠标的一些事件就可以

Answer 3

$("#IDN_A > a").click(function(){

Answer 4

直接按照以上的方法改都不能实现效果~~~~
我在想是不是 id或者是script的位置放错了？？
可是该怎么放呢？

Answer 5

直接按照以上的方法改都不能实现效果~~~~
我在想是不是 id或者是script的位置放错了？？
可是该怎么放呢？

Answer 6

<!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>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head>
<body>
    <div id="IDN_A" class="tt">
        <a class="on" href="#">社联新闻</a> <a href="#">社团新闻</a></div>
    <div id="IDN_A_CONTENT" class="jtjs_box box1">
        <a href="#">
            <img style="float: left" src="images/news3.jpg"></a>
        <div class="newslist">
            <li><a href="#">大学生社团联合会第九届社团推荐会</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li></div>
        <div class="newslist" style="display: none">
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li>
            <li><a href="#">我校第九届社团推介会隆重举行</a><span>2011-12-15</span></li>
            <li><a href="#">校大学生社团联合会举行第七届学生社团表彰大会</a><span>2011-12-15</span></li>
            <li><a href="#">广东石油化工学院第八届摇滚音乐节圆满落幕</a><span>2011-12-15</span></li>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#IDN_A > a").click(function () {
                $("#IDN_A > a").removeClass("on");
                $(this).addClass("on");
                $("#IDN_A_CONTENT > div").hide();
                $("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
            });
        })
    </script>
    </DIV>
</body>
</html>你是不是没导入Jquery 库啊？
<script src="http://code.jquery.com/jquery-latest.js"></script> 

Answer 7

我是想改用这段js代码，改到另一个地方，然后改成click的！
<div class="page-left" style="margin-top:10px;">
<div class="page-left lefttitle"></div>
<ul><li><a href="#" class="on" id=IDN_A>社联新闻</a></li><li><a href="#" id=IDN_A>社团新闻</a></li></ul>
</div><div id=IDN_A_CONTENT class="page-right">
<div class="righttitle"><h1>社联新闻</h1></div>
<ul><li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><img src="../images/19.gif"/><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
</ul></div>
<div class="page-right" style="DISPLAY: none">
<div class="righttitle"><h1>社团新闻</h1></div>
<ul><li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><img src="../images/19.gif"/><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
<li><a href="#">[通知]校大学生社团联合会举行第七届学生社团表彰大会</a><span>2012年3月21号</span></li>
</ul></div>
<SCRIPT type=text/javascript>
            $(document).ready(function(){
                $("#IDN_A > a").mouseclick(function(){
                    $("#IDN_A > a").removeClass("on");
                    $(this).addClass("on");
                    $("#IDN_A_CONTENT > div").hide();
                    $("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
                });
            })
</SCRIPT></div>

Answer 8

<SCRIPT type=text/javascript>
            $(document).ready(function(){
                $("#IDN_A > a").click(function(){
                //$("#IDN_A > a").mouseclick(function(){
                //我不清楚你没发上来的文件有没有改，但你刚发上来的这没改对.
                    $("#IDN_A > a").removeClass("on");
                    $(this).addClass("on");
                    $("#IDN_A_CONTENT > div").hide();
                    $("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
                });
            })
</SCRIPT>

Answer 9

<SCRIPT type=text/javascript>
            $(document).ready(function(){
                $("#IDN_A > a").click(function(){
                //$("#IDN_A > a").mouseclick(function(){
                //我不清楚你没发上来的文件有没有改，但你刚发上来的这没改对.
                    $("#IDN_A > a").removeClass("on");
                    $(this).addClass("on");
                    $("#IDN_A_CONTENT > div").hide();
                    $("#IDN_A_CONTENT > div").eq($("#IDN_A > a").index(this)).show();
                });
            })
</SCRIPT>

Answer 10

去掉以后把script放入头部就对了！
只是又产生了新的问题，应该是css写得不规范
anyway，感谢大家，特别是上面这位！！！
谢谢！！