这种点击换新闻的效果怎么写代码，请高手指点。。

解决方案 »

  1.   

    首先QQ空间的图片外部不能访问啊。最好上传下（地址放在浏览器下看到了。。呵）说下大体的思路
    1.点击 学校通知时，显示图片加深的样式并且把它对应的新闻显示出来，其他栏目(校园新闻)样式换成 浅色，并把其他的新闻信息隐藏起来，
    2.同理，点击学校公告时 跟上面说的原理是一样的做法，可以用现在流行的jquery 来做，很方便知识点包括 dom,html,js 
      

  2.   

    <html>
    <body>
    <script src="jquery.js"></script> <!--去这个网站下载jquery http://jquery.com/-->
    <style type="text/css">
    .item_list  {width:500px;}
    .item_list li {float:left;width:100px;color:gray;}
    .item_list .active_item {color:red;}
    .list_display {width:500px;}</style>
    <div>
    <ul class="item_list">
    <li class="active_item">校园新闻</li>
    <li>学校通知</li>
    <li>学校公告</li>
    </ul> <ul  class="list_display" style="display:block;">
    <li>1111</li>
    <li>11111</li>
    <li>111111</li>
    <li>1111111</li>
    <li>11111111</li>
    </ul>
    <ul class="list_display" style="display:none;">
    <li>2222</li>
    <li>22222</li>
    <li>222222</li>
    <li>22222222</li>
    <li>222222222</li>
    </ul>
    <ul class="list_display"  style="display:none;">
    <li>3333</li>
    <li>333333</li>
    <li>3333333</li>
    <li>33333333</li>
    <li>333333333</li>
    </ul>
    <div><script style="text/javascript">   jQuery('.item_list').children('li').click(function(){
       index =jQuery('.item_list').children('li').index(jQuery(this));
    jQuery('.list_display').hide();
    cur = jQuery('.list_display').get(index);
    jQuery(cur).show();
    jQuery(this).addClass('active_item');
    jQuery(this).siblings().removeClass('active_item');
    });
    </script>
    </body>
    </html>