按钮样式元素的类冲突

class clash on button style element

本文关键字：冲突 元素 样式 按钮      更新时间：2023-09-26

我们有一个样式如下的按钮:

<a class="mini pink button">Arrange Viewing</a>

我们还使用了scroll to，如果它被应用到一个href链接上，它将看起来像这样。

<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Arrange Viewing</a>

我的问题是我想要迷你粉红色按钮上点击滚动到内容，但我不能有2类在同一对象。

按钮的css为:

    a.button {
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
    font-weight: bold;
    line-height: 1;
    padding: 9px 34px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.mini.button {
    font-size: 14px;
    padding: 6px 8px;
}
.pink, .pinkaswell {
    background: none repeat scroll 0 0 #EC008C;
}

js:

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
    settings = jQuery.extend({
        speed : 1100
    }, settings);   
    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")
            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

此处提琴http://jsfiddle.net/VtxnK/

一个对象可以有两个类，但不能有两个类属性。只需将类名添加到其他类的末尾。

<a href="#myAnchor" rel="" id="anchor1" class="mini pink button anchorLink">
    Arrange Viewing
</a>

或者，由于您有一个id，您可以通过id…

访问它。
$( "#anchor1" ).anchorAnimate();
相关文章：