js鼠标滑过新闻标题列表显示对应新闻内容【原创】

有一个页面，左边是新闻列表标题，鼠标划过相应的标题，在右侧显示相应的内容。代码如下：

首先是分开左侧的列表和右侧的内容区域，内容用矩形边框框起来。

css：

      #Sidebar {
          width:745px;height:515px;float:left;  
          margin-top:20px;      
          background-image:url(image/u60.png);
     background-repeat:no-repeat;
             border:0px solid #989898 ;  
          }
      #left-sidebar{
          width:389px;height:366px;float:left;
          padding-top:20px;
          border:0px solid #989898;     
      }

      #right-sidebar{
          display:none;
          margin-top:20px;margin-right:10px;
          width:299px;height:349px;float:right;
          background-image:url(image/u31.png);
     background-repeat:no-repeat;
          border:0px solid #989898;     
      }

页面代码：

      <div id="Sidebar">
        <p class="bar1"><span class="text">最新消息</span></p>
        <div id="left-sidebar">
         <ul>
           <li class="text-li">
              <a onmouseover="show('1',1)" onmouseout="show('1',-1)">今晚打老虎，哼哼哈嘻1！</a><span class="text-time">2009-01-01 12:12:12</span>
           </li>
           <li>
              <a onmouseover="show('2',1)" onmouseout="show('2',-1)">今晚打老虎，哼哼哈嘻2！</a><span class="text-time">2009-01-01 12:12:12</span>
           </li>
         </ul>
        </div>
        <div id="right-sidebar">
        <%int count = 1;
         int count2 = 2; %>
        <span id="<%=count%>" style="display:none">
         <div id="content-title">今晚打老虎1</div>
         <div id="content">今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎<br>
         今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎<br>
         今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎</div>
        </span>
        <span id="<%=count2%>" style="display:none">
         <div id="content-title">今晚打老虎2</div>
         <div id="content">今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎<br>
         今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎<br>
         今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎今晚打老虎</div>
        </span>        
        </div>       
       </div>

js代码：

<script language='JavaScript'>
function show(id,d){
var show = document.getElementById(id);
var border = document.getElementById('right-sidebar');

if(d == 1){
    show.style.display = 'block';
    border.style.display = 'block'
   
}else{
    show.style.display = 'none';
    border.style.display = 'none';
   
}

}
</script>

 

这样用循环来自动获取对应标题和内容也可以，id="<%=count2%>" 用这种方式来取值就行~

 

评论

2 楼 181054867 2010-12-17  

最要紧的是截图来看啊

1 楼 guimingyue 2010-12-16  

大哥，麻烦发的时候排个版，这样看比较痛苦......