Question

我正在寻找一种方法来融入这个点击功能 - 将按钮图像交换为“活动”图像。每个按钮都是一个独特的图像，具有独特的活动效果。这是一个子菜单，当前用于在单击每个按钮时添加/隐藏下面的段落

JS：

 $(".button a").click(function(e) {
    var id = this.hash;
    $("#b-text div:visible").not(id).fadeOut(function(){
        $(id).fadeIn();
    });
    e.preventDefault();
});
$("#b-text div:not(#button1)").hide();

HTML：

<div id="buttons">

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button1"><img src="img/button1-a.png" alt="" /></a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button2"><img src="img/button2.png" alt="" /></a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button3"><img src="img/button3.png" alt="" /></a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button4"><img src="img/button4.png" alt="" /></a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button5"><img src="img/button5.png" alt="" /></a>
        </div>
    </div>
</div>


<div id="b-text">

    <div id="button1">
        <p>text here</p>
    </div>

    <div id="button2">
        <p>text</p>
    </div>

    <div id="button3">
        <p>text</p>
    </div>

    <div id="button4">
        <p>text</p>
    </div>

    <div id="button5">
        <p>text</p>
    </div>

</div>

Answer 1

以下是解决问题的方法：

<强> Demo at jsFiddle

使用css类（active）而不是本机.active属性，并在按钮中切换类。

<强> CSS：

.button {
    background-image: ...
    background-position: -10px -80px;
    cursor: pointer;
}

.button.active {
    background-image: ...
    background-position: -200px -80px;
}

<强> HTML：

<div id="buttons">
    <div>
        <h2>Title</h2>
        <div class="button active" adr="#button1"></div>
    </div>
    <div>
        <h2>Title</h2>
        <div class="button" adr="#button2"></div>
    </div>
    ...

<强> JS：

$(".button").click(function(e) {
    var id = $(this).attr('adr');

    $('.button').removeClass('active');
    $(this).addClass('active');
    ...

Answer 2

不使用<img>代码，而只使用<a>代码并阻止浏览器加载新图像（活动图像）
我建议您使用精灵技术和 background-image ，例如：

 __________________________________
|                |                 |
|  normal image  |   focus image   |
|________________|_________________|

使用jQuery添加/删除CSS .active将更改每个bg-image的背景位置

/* all buttons */
.button a {
   display: inline-block ;
   width:  120px ;
   height: 80px  ;
   background-position: 0 0;
}
.button a.active { /* toggle this class in jQuery */
   background-position: -120px 0;
}

/* buttons defaults */
.button a[href='#button1']{
   background-image: url('button1.png');
}
.button a[href='#button2']{
   background-image: url('button2.png');
}

的jQuery

var $buttons_A = $('.button a');

$buttons_A.click(function(e) {
    e.preventDefault();   // Prevent browser follow link, jump etc
    $buttons_A.removeClass('active');
    $(this).addClass('active');
    // other stuff here... 
});

Answer 3

您没有在锚标记中添加任何文字。请查看以下演示小提琴，了解您正在寻找的解决方案。

<div id="buttons">

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button1"><img src="img/button1-a.png" alt="" />link 1</a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button2"><img src="img/button2.png" alt="" />link 2</a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button3"><img src="img/button3.png" alt="" />link 3</a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button4"><img src="img/button4.png" alt="" />link 4</a>
        </div>
    </div>

    <div>
        <h2>Title</h2>
        <div class="button">
            <a href="#button5"><img src="img/button5.png" alt="" />link 5</a>
        </div>
    </div>
</div>


<div id="b-text">

    <div id="button1">
        <p>text here 1</p>
    </div>

    <div id="button2">
        <p>text 2</p>
    </div>

    <div id="button3">
        <p>text 3</p>
    </div>

    <div id="button4">
        <p>text 4</p>
    </div>

    <div id="button5">
        <p>text 5</p>
    </div>

</div>

如果你想点击标题显示/隐藏文字，那么这就是答案。

$("h2").click(function(e) {

    var id = $(this).next().find('a').attr('href');
    console.log(id)
    $("#b-text div:visible").not(id).fadeOut(function(){
        $(id).fadeIn();
    });
    e.preventDefault();
});

h2点击的小提琴演示：Demo

http://jsfiddle.net/aSaLR/

将图像交换添加到单击事件

3 个答案: