通过单击功能仅在活动班级中添加/添加图像 [英] Prepend/Append an Image only in active class by Click Function

问题描述

我知道您不经常遇到的事情.但是我会尽力描述它.

我有一个链接列表.我还具有一个脚本，该脚本通过向其添加类来使被单击的链接处于活动状态.每次点击链接时，我们都会有一个不同的活动链接.

问题是，每次发生这种情况时，我都希望在该活动链接之前添加一个图像. 我设法添加了该图像，但是不幸的是，脚本每次都单击该链接而不是仅对活动链接添加了该图像.我希望此图像仅在活动类链接之前.

我的脚本是:

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
        $(this).prepend('<img class="gallery-selected-bg" src="http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg">');
    });
});

对不起，如果我对它的描述不好，请看一下我的代码...如果我可以简单地说，我只想为一个活动链接添加一个球.

http://jsfiddle.net/dstpt/390/

解决方案

我修改了您的代码并对其进行了一点清理...

这是小提琴: http://jsfiddle.net/dstpt/395/

基本上，我在显示图像之前使用CSS.

HTML(将您的版本简化为只需要活动类)

<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2">2</a></li>
        <li><a href="#" id="3">3</a></li>
    </ul>
</div>

JS(也将其简化)

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a','click',function(){
        sidebar.find('a').removeClass('active');
        $(this).addClass('active');
    });
});

CSS

a {
    border:0;
    background:0;
    font-size:30px;
    color:navy;
}

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
    font-size:30px;
    color:Red;
}

a.active:before {
    content: url('http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg');
}

I know its something that you don't meet very often..but I'll try describe it.

I have a list of links. I also have a script that makes the link that has been clicked active by adding a class to it. Every time a link clicked, we have a different active link.

Problem is that every time this happens, I want an image prepend to this ACTIVE link. I manage to add this image but unfortunately script add this image EVERY TIME that clicked on link and not only for the active link. I want this image to be prepend ONLY for active class link.

My script is:

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
        $(this).prepend('<img class="gallery-selected-bg" src="http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg">');
    });
});

Sorry if I did not describe it well, you can see my code please... If I could tell it simpler this I want is only one ball for only the active link that may be changes by click.

http://jsfiddle.net/dstpt/390/

解决方案

I modified your code and cleaned it up abit...

Here is the fiddle: http://jsfiddle.net/dstpt/395/

Basically I'm using CSS :before to show your image.

HTML (simplified your version to only need the active class)

<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2">2</a></li>
        <li><a href="#" id="3">3</a></li>
    </ul>
</div>

JS (simplified it as well)

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a','click',function(){
        sidebar.find('a').removeClass('active');
        $(this).addClass('active');
    });
});

CSS

a {
    border:0;
    background:0;
    font-size:30px;
    color:navy;
}

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
    font-size:30px;
    color:Red;
}

a.active:before {
    content: url('http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg');
}

这篇关于通过单击功能仅在活动班级中添加/添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！