活动时单击按钮的阴影（单击）

时间：2015-05-19 10:25:33

标签： javascript jquery html css

这是DEMO

我有这个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动画停止，我可以看到该按钮的背景图像，当我点击另一个按钮时，所有按钮都转到默认样式（灰色阴影）和只有我的按钮单击，显示背景，没有任何阴影。

5 个答案:

答案 0 :(得分：0)

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

的javascript：

.active{
     border: 3px solid red;
     background: url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) no-repeat center -5px;
 }

CSS：

}

检查小提琴：Final Edit

答案 1 :(得分：0)

我清理了你的代码（只是js）...... 

$(document).ready(function() {
  $('button').on('click', function() {
    $('button').removeClass('active');
    $(this).addClass('active');
  });
});
a {
  display: none;
}
button {
  width: 190px !important;
  height: 50px !important;
  position: fixed;
  border: hidden;
}
.btnliner {
  background: url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) 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(http://s22.postimg.org/tz88bokup/stripes.png) no-repeat 0px 0px, url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) 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(http://s23.postimg.org/arpn52pnf/btnbg.jpg) no-repeat center -5px;
  /* Fallback */
  background: url(http://s22.postimg.org/tz88bokup/stripes.png) no-repeat 0px -200px, url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) 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;
}
.active {
  border: 3px solid red;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <a class="one txtbox1"> Text1 </a>

  <a class="two txtbox1">Text2</a>

  <a class="three txtbox1">text3 </a>

  <a class="four txtbox1">text4 </a>

  <a class="five txtbox1">text5 </a>

  <a class="six txtbox1">text6 </a>

  <a class="seven txtbox1">text 7 </a>

  <a class="eight txtbox1">text 8 </a>

  <a class="nine txtbox1">text9 </a>


  <br>
  <br>
  <button id="button1" data-target="one" class="btnliner">محصولات</button>
  <br>
  <br>
  <br>
  <button id="button2" data-target="two" class="btnliner">مشتریان</button>
  <br>
  <br>
  <br>
  <button id="button3" data-target="three" class="btnliner">سیستم های داخلی</button>
  <br>
  <br>
  <br>
  <button id="button4" data-target="four" class="btnliner">تیکتینگ</button>
  <br>
  <br>
  <br>
  <button id="button5" data-target="five" class="btnliner">فروم</button>
  <br>
  <br>
  <br>
  <button id="button6" data-target="six" class="btnliner">دانش های مرتبط</button>
  <br>
  <br>
  <br>
  <button id="button7" data-target="seven" class="btnliner">اخبار</button>
  <br>
  <br>
  <br>
  <button id="button8" data-target="eight" class="btnliner">تماس با ما</button>
  <br>
  <br>
  <br>
  <button id="button9" data-target="nine" class="btnliner">درباره ما</button>

我没有看到文字褪色，抱歉。无论如何，你不应该一遍又一遍地使用相同的代码，最糟糕的是做一个函数。

答案 2 :(得分：0)

您似乎可以一起处理所有按钮，而不是为每个按钮编写单独的代码：

$(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"
            });
        });
    });
});

jsfiddle DEMO

答案 3 :(得分：0)

选中demo。

如果你想要这个，那么添加这个代码

.btnliner:active{
 background: url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) no-repeat center -5px;
 }

答案 4 :(得分：0)

刚刚过滤了您的JS代码，只需将我的JS代码替换为我的

Working:Demo

<强> 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");       
    });

});
相关问题
最新问题