Javascript多点击事件 [英] Javascript multi click event
本文介绍了Javascript多点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一些帮助我有以下使用javascript和HTML做的输出的链接。 http://i.imgbox.com/adlMVTIx.jpg我需要做的是当我点击一个圆圈时，另一个圆圈应该被禁用，而点击的圆圈应该是活动的...现在的问题是点击时一个圆圈然后点击另一个...两个都保持活动状态..
这是我到目前为止所做的javascript代码，请帮帮我们真的很感激！< br $> b $ b
< head >
< title > < / title >
<！ - 脚本 - >
< <跨度class =code-leadattribute> script src = jquery / jquery-1.7.2.min.js type = text / javascript > < / script >
< script src = scripts / main.js type = text / javascript > < / script >
<！ - styles - >
< link href = styles / styles.css rel = stylesheet type = text / css / >
< script type = text / javascript >
$（document）.ready（function（）{
$（'＃c1'）。click（function（）{
/ /$(this).css('background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（'height'，'190px'）;
$（this）.css（'top'，243 - （（190 - 125）/ 2））;
$（this）.css（'left'，335 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css（'background-image'，'URL（assets / images / blue_back.png）'）;
}）
$（'＃c2'）。click（function（）{
// $（this）.css（' background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（'height'，'190px'） ;
$（this）.css（'top'，898 - （（190 - 125）/ 2））;
$（this）.css（'left'，336 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css（'background-image'，'URL（assets / images / 1.png） ）'）;
}）
$（'＃c3'）。click（function（）{
// $（this）.css（'background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（ 'height'，'190px'）;
$（this）.css（'top'，470 - （（190 - 125）/ 2））;
$（this）.css（'left '，100 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css （'background-image'，'URL（assets / images / 2.png）'）;
}）
$（'＃c4'）。click（function（）{
// $（this） .css（'background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（'height'， '190px'）;
$（this）.css（'top'，800 - （（190 - 125）/ 2））;
$（this）.css（'left'，570 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css（'background-image'，'URL（assets / images） /3.png）'）;
}）
$（'＃c5'）。click（function（）{
//$(this).css('background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this ）.css（'height'，'190px'）;
$（this）.css（'top'，165 - （（190 - 125）/ 2））;
$（this）。 css（'left'，1287 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（th是）.css（'background-image'，'URL（assets / images / 5.png）'）;
}）
$（'＃c6'）。click（function（）{
// $（this） .css（'background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（'height'， '190px'）;
$（this）.css（'top'，308 - （（190 - 125）/ 2））;
$（this）.css（'left'，1450 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css（'background-image'，'URL（assets / images） /6.png）'）;
}）
$（'＃c7'）。click（function（）{
//$(this).css('background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this ）.css（'height'，'190px'）;
$（this）.css（'top'，600 - （（190 - 125）/ 2））;
$（this）。 css（'left'，1390 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（t他的.css（'background-image'，'URL（assets / images / 7.png）'）;
}）
$（'＃c8'）。click（function（）{
// $（this） .css（'background-color'，'＃005aa8'）;
$（this）.css（'width'，'190px'）;
$（this）.css（'height'， '190px'）;
$（this）.css（'top'，820 - （（190 - 125）/ 2））;
$（this）.css（'left'，1720 - （（190 - 125）/ 2））;
$（this）.removeClass（blink）;
$（this）.css（'background-image'，'URL（assets / images） /8.png）'）;
}）
}）
< / script >
< / head >
< 正文 >
& lt; div id = main >
< div id = c1 class = circle blink >
< / div >
< div id = c2 class = 圈闪烁 > ;
< / div >
< div id = c3 class = circle blink >
< / div >
< div id = c4 class = circle blink >
< / div >
< div id = c5 class = 圈闪烁 >
< / div >
< div id = c6 class = circle blink >
< / div >
< div id = c7 class = circle blink >
< / div >
< div id = c8 class = 圈子闪烁 >
< / div >
< ; / div >
< / body >
< / html >
<前郎=CSS> 正文
{
margin ： 0;
padding ： 0;
}
＃ main
{
width ： 1920px ;
height ： 1080px ;
返回地面图像 ： URL（'../ assets / images / iwmi-bg.jpg'）;
}
。 circle
{
width ： 60px;
height ： 60px;
- webkit -border-radius ： 50％;
- moz-border-radius ： 50％;
border-radius ： 50％;
position ： 绝对值;
border ： 5px solid＃fdb219; < span class =code-comment> / * box-shadow：5px 5px＃000; * /
text-align ： center;
background-repeat ： no-repeat;
background-position ： center; }
@keyframes blink {
0％{ width ： 60px; height ： 60px; left ： 335px; < span class =code-attribute> top ： 243px; }
100％{ width ： 65px; < span class =code-attribute> height ： 65px; left ： 333.5px; top ： 241.5px; }
}
@ - webkit-keyframes blink {
0％{ width ： 60px; height ： 60px; left ： 335px; top ： 243px; }
100％{ width ： 65px; height ： 65px; < span class =code-attribute> left ： 333.5px; top ： 241.5px; }
}
。 blink {
- webkit-animation ： 闪烁.75s线性无限;
- moz-animation ： blink .75s linear infinite;
- ms-animation ： 闪烁.75s线性无限;
- o-animation ： 闪烁.75s线性无限;
动画 ： 闪烁.75s线性无限;
}
@keyframes blink1 {
0％{ width ： 60px; height ： 60px; left ： 335px; top ： 243px; }
100％{ width ： 65px; height ： 65px; left ： 332.5px; top ： 240.5px; }
}
@ - webkit-keyframes blin k1 {
0％{ width ： 60px; height ： 60px ; left ： 336px; top ： 898px; }
100％{ width ： 65px; height ： 65px; left ： 333.5px; top ： 895.5px; }
}
。 blink1 {
- webkit-animation ： blink1 .75s线性无限;
- moz-animation ： blink1 .75s线性无限;
- ms-animation ： blink1 .75s linear无限;
- o-animation ： blink1 .75s线性无限;
动画 ： blink1 .75s线性无限;
}
＃ c1
{
left ： 335px;
top ： 243px;
}
＃ c2
{
left ： 336px;
top ： 898px;
}
＃ c3
{
左 ： 100px;
top ： 470px;
}
＃< span class =code-leadattribute> c4
{
left ： 570px;
top ： 800px;
}
＃ c5
{
left ： 1287px;
top ： 165px;
}
＃ c6
{
left ： 1450px;
top ： 308px;
}
＃ c7
{
left ： 1390px;
top ： 600px;
}
＃ c8
{
left ： 1720px;
top ： 820px;
}
解决方案
（document）.ready（function（）{
（'＃c1'）。click（function（）{
//
（this）.css（' background-color'，'＃005aa8'）;
i need some help i have the link of the output of what i have done below using javascript and HTML. http://i.imgbox.com/adlMVTIx.jpg What i need to do is when i click on one circle the other circle should be disabled and the one that is clicked should be active..the problem now is that when click on a circle and click another one..both stays active..
This is the javascript code i have done so far,Please help me out guys really appreciate it!
<head>
<title></title>
<!--scripts-->
<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/main.js" type="text/javascript"></script>
<!--styles-->
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#c1').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 243 - ((190 - 125) / 2));
$(this).css('left', 335 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/blue_back.png)');
})
$('#c2').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 898 - ((190 - 125) / 2));
$(this).css('left', 336 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/1.png)');
})
$('#c3').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 470 - ((190 - 125) / 2));
$(this).css('left', 100 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/2.png)');
})
$('#c4').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 800 - ((190 - 125) / 2));
$(this).css('left', 570 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/3.png)');
})
$('#c5').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 165 - ((190 - 125) / 2));
$(this).css('left', 1287 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/5.png)');
})
$('#c6').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 308 - ((190 - 125) / 2));
$(this).css('left', 1450 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/6.png)');
})
$('#c7').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 600 - ((190 - 125) / 2));
$(this).css('left', 1390 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/7.png)');
})
$('#c8').click(function () {
//$(this).css('background-color', '#005aa8');
$(this).css('width', '190px');
$(this).css('height', '190px');
$(this).css('top', 820 - ((190 - 125) / 2));
$(this).css('left', 1720 - ((190 - 125) / 2));
$(this).removeClass("blink");
$(this).css('background-image', 'URL(assets/images/8.png)');
})
})
</script>
</head>
<body>
<div id="main">
<div id="c1" class="circle blink">
</div>
<div id="c2" class="circle blink">
</div>
<div id="c3" class="circle blink">
</div>
<div id="c4" class="circle blink">
</div>
<div id="c5" class="circle blink">
</div>
<div id="c6" class="circle blink">
</div>
<div id="c7" class="circle blink">
</div>
<div id="c8" class="circle blink">
</div>
</div>
</body>
</html>
This is my css code
body
{
margin: 0;
padding: 0;
}
#main
{
width: 1920px;
height: 1080px;
background-image: URL('../assets/images/iwmi-bg.jpg');
}
.circle
{
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
border: 5px solid #fdb219; /*box-shadow: 5px 5px #000;*/
text-align: center;
background-repeat:no-repeat;
background-position:center; }
@keyframes blink {
0% { width:60px; height:60px; left: 335px; top: 243px; }
100% { width:65px; height:65px; left: 333.5px; top: 241.5px; }
}
@-webkit-keyframes blink {
0% { width:60px; height:60px;left: 335px; top: 243px; }
100% { width:65px; height:65px;left: 333.5px; top: 241.5px; }
}
.blink {
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
animation: blink .75s linear infinite;
}
@keyframes blink1 {
0% { width:60px; height:60px; left: 335px; top: 243px; }
100% { width:65px; height:65px; left: 332.5px; top: 240.5px; }
}
@-webkit-keyframes blink1 {
0% { width:60px; height:60px;left: 336px; top: 898px; }
100% { width:65px; height:65px;left: 333.5px; top: 895.5px; }
}
.blink1 {
-webkit-animation: blink1 .75s linear infinite;
-moz-animation: blink1 .75s linear infinite;
-ms-animation: blink1 .75s linear infinite;
-o-animation: blink1 .75s linear infinite;
animation: blink1 .75s linear infinite;
}
#c1
{
left: 335px;
top: 243px;
}
#c2
{
left: 336px;
top: 898px;
}
#c3
{
left: 100px;
top: 470px;
}
#c4
{
left: 570px;
top: 800px;
}
#c5
{
left: 1287px;
top: 165px;
}
#c6
{
left: 1450px;
top: 308px;
}
#c7
{
left: 1390px;
top: 600px;
}
#c8
{
left: 1720px;
top: 820px;
} 解决方案
(document).ready(function () {
('#c1').click(function () { //
(this).css('background-color', '#005aa8');
这篇关于Javascript多点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
