Question

我正在寻找可以通过点击更改左侧导航的li图像的代码。我有4个选项和8个图像，但只希望一次激活一个。

<div class="aside important">
        <ul>
            <li><a href="#about_content"><img src="../images/about_active.png" alt=""  /></a></li>
            <li><a href="#content_advantage"><img src="../images/advantage.png" alt=""  /></a></li>
            <li><a href="#content_partner"><img src="../images/partners.png" alt=""  /></a></li>
            <li><a href="#content_history"><img src="../images/history.png" alt=""  /></a></li>            
        </ul>
    </div>

我一次只想要一张活动图像。请帮我一个代码。

Answer 1

那么，您可以通过两种不同的方式实现这一目标吗？

根据您的css定义，您可以在单击元素（无论是锚点还是列表项目）时使用javascript更改图像src
或者，您可以使用background css属性删除图像并使用css设置菜单样式，然后使用css伪类更改背景图像。

我个人更喜欢第二种选择，因为它是一种更清洁的方法。

让我知道你是否有意义

利奥

Answer 2

如果使用静态图像，则应使用css类而不是img。它对未来的变化更加灵活。

例如：
1）使css像

.nav-but { background: url(yourimg) 0 -20px no-repeat; } // with -20px because its normal bg

2）制作第二个活跃的CSS，如

.nav-but:hover, .active { background: url(yourimg) 0 0px no-repeat; }  // 0px as second part of bg used for active and hover

3）如果您使用的是jquery，可以添加类似

的类

http://api.jquery.com/addClass/

工作示例的来源

make menu button
button class

更改侧面菜单的图像

2 个答案: