小编Din*_*cel的帖子

我有一个看起来像这样的无序列表

HTML

<div id="pop">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
     </ul>
</div>
<div id="info-1></div>
<div id="info-2></div>

当您将鼠标悬停在其中一个项目上时,会显示一个窗口,其中包含有关该项目的一些信息.我已经为一个项目解决了这个问题,现在我想知道如何在整个列表中完成这项工作.

我最初的想法是为每个项目创建一个脚本......但考虑到js的功能,这似乎有点厚.

使用Javascript

$(function(){
     $('pop a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

所以我的问题当然是,如何让这个脚本适用于所有项目.

我试图通过使用css,javascript添加/删除活动类来突出显示当前图像.

我将我的解决方案上传到jsfiddle,请看一下.真的想知道这有什么问题. http://jsfiddle.net/BEmXZ/39/

HTML

<div class="container-thumbs">
    <div><a><img src=".jpg" /></a></div>
    <div><a class="active"><img src=".jpg" /></a></div> 
    <div><a><img src=".jpg" /></a></div>
</div>

使用Javascript

var make_button_active = function() {
    //Get item siblings
    var siblings =($(this).siblings());
    //Remove active class on all buttons
    siblings.each(function (index) {
            $(this).removeClass('active');
        }
    );

    //Add the clicked button class
    $(this).addClass('active');
}   

$(document).ready(function() {
    $(".container-thumbs a").click(make_button_active);
});

CSS

.container-thumbs{
    width: 300px; height: 25; font-size: 18px;
}
.container-thumbs a{
    list-style: none; float: left; margin-right: 4px; padding: 5px;
}
.container-thumbs div a:hover, .container-thumbs div a.active { …

我需要为其中的几个列表项添加更多功能ul,我想知道如何使用滚动功能,因为项目数量可以向上和向下滚动.

这是我的清单:

<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>