Javascript 拆下按钮'；当其处于活动状态（单击）时的阴影_Javascript_Jquery_Html_Css

Javascript 拆下按钮'；当其处于活动状态（单击）时的阴影

javascript jquery html css

Javascript 拆下按钮'；当其处于活动状态（单击）时的阴影,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我有这个CSS用于按钮动画和其他： .btnliner { background: url(../images/btnbg.png) no-repeat center -105px; /* Fallback */ display: block; text-align: center; font-family: Arial, sans-serif; font-size: 18px; color: #fff; text-decor

这是

我有这个CSS用于按钮动画和其他：

.btnliner {
    background: url(../images/btnbg.png) no-repeat center -105px;
    /* Fallback */
    display: block;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    background: url(../images/stripes.png) no-repeat 0px 0px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-box-shadow: 2px 2px 10px #000;
    -webkit-box-shadow: 2px 2px 10px #000;
    -o-box-shadow: 2px 2px 10px #000;
    box-shadow: 2px 2px 10px #000;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.btnliner:hover {
    background: url(../images/btnbg.png) no-repeat center -5px;
    /* Fallback */
    background: url(../images/stripes.png) no-repeat 0px -200px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

这是我的JS：

$(document).ready(function () {
    $("#button1").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button1").css("border", "3px solid red");
            $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important");
        });
    });
});

$(document).ready(function () {
    $("#button2").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button2").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
   $("#button3").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button3").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
    $("#button4").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button4").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button6").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button6").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button7").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button7").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button8").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button8").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button9").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button9").css("border", "3px solid red");
        });
    });
});

当我单击按钮时，背景上仍有灰色阴影。我想要的是，当我单击按钮时，css动画停止，我可以看到该按钮的背景图像，当我单击另一个按钮时，所有按钮都将变为默认样式（它们上的灰色阴影），只有我单击的按钮，显示没有阴影的背景。

编辑：单击后再次设置原始背景，并仅将类保留为选定按钮

javascript:

$(document).ready(function () {
  $('.btnliner').on('click', function () {
    var btn = $(this);
    var targetEl = $(this).data('target');
    $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
        $('.' + targetEl).fadeIn();
        $('.btnliner').removeClass('active');
        btn.addClass('active');
    });
  });
});

CSS:

Check fiddle:

我稍微整理了一下您的代码（只是js）

$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
$（'button'）。removeClass（'active'）；
$（this.addClass（'active'）；
});
});
a{
显示：无；
}
钮扣{
宽度：190px！重要；
高度：50px！重要；
位置：固定；
边界：隐藏；
}
.btnliner{
背景：url(http://s23.postimg.org/arpn52pnf/btnbg.jpg)无重复中心-105px；
/*退路*/
显示：块；
文本对齐：居中；
字体系列：Arial，无衬线；
字号：18px；
颜色：#fff；
文字装饰：无；
文本阴影：1px 1px 0px#000；
-moz边界半径：25px；
-webkit边界半径：25px；
-o-边界半径：25px；
边界半径：25px；
背景：url(http://s22.postimg.org/tz88bokup/stripes.png)无重复0px 0px，url(http://s23.postimg.org/arpn52pnf/btnbg.jpg)无重复中心-8px；
-moz盒阴影：2×2×10px#000；
-webkit盒阴影：2px 2px 10px#000；
-o形盒阴影：2×2×10px#000；
盒影：2×2×10px#000；
-moz转换：所有1都放松；
-webkit转换：所有1都可以轻松完成；
-o型过渡：所有1都放松；
过渡：所有1都放松；
}
.btnliner:悬停{
背景：url(http://s23.postimg.org/arpn52pnf/btnbg.jpg)无重复中心-5px；
/*退路*/
背景：url(http://s22.postimg.org/tz88bokup/stripes.png)无重复0px-200px，url(http://s23.postimg.org/arpn52pnf/btnbg.jpg)无重复中心-8px；
-moz过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.主动{
边框：3倍纯红；
-webkit盒阴影：无；
-莫兹盒阴影：无；
-ms盒影：无；
盒影：无；
}

文本1
文本2
文本3
文本4
文本5
文本6
文本7
文本8
文本9




محصولات






مشتریان






سیستم های داخلی






تیکتینگ






فروم






دانش های مرتبط






اخبار






تماس با ما






似乎您可以同时处理所有按钮，而不是为每个按钮编写单独的代码：
$(document).ready(function () {
    $('.btnliner').on('click', function () {
        var btn = $(this);
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('.btnliner').css({
                "border": "hidden",
                "box-shadow": "2px 2px 10px #000"
            });
            btn.css({
                "border": "3px solid red",
                "box-shadow": "none"
            });
        });
    });
});

检查此项
如果你想要这个，那么添加这个代码
.btnliner:active{
 background: url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) no-repeat center -5px;
 }

只是过滤你的JS代码，用我的JS代码替换你的JS代码

JS
$(document).ready(function () {
    $("button").click(function () {
    var curId = this.id;
    $("button").css("border" , "hidden" );
    $("#"+curId).css("border","3px solid red");
    $("#"+curId).css("box-shadow","none");       
    });

});

盒影：无；这就是你要找的。您最好创建一个活动类，并根据需要添加和删除它it@Andrew，否，我希望删除按钮图像上的阴影。检查标题，而不是标题上写的内容。上面写着移除shadow@Aria当前位置查看我编辑的答案。您似乎在此处添加了类似的两个问题：未工作，我不是指方框阴影，我是指按钮图像上有一些动画的阴影。他不是指方框阴影类似的答案已在此处。
$(document).ready(function () {
    $("button").click(function () {
    var curId = this.id;
    $("button").css("border" , "hidden" );
    $("#"+curId).css("border","3px solid red");
    $("#"+curId).css("box-shadow","none");       
    });

});