0

「ホバー」に表示されるものとまったく同じように、選択した画像の周りにボックスを表示して強調表示しようとしています。何か案は？私はいくつかのことを試しましたが、何もうまくいかないようです。ホバー機能は完全に機能しますが、クリックすると、カーソルを離しても画像の周囲にボックスが表示される必要があります。以下にコードを貼り付けました。前もって感謝します！！

<html><head>

<style type="text/css">
.event {
display: inline-block;
float: left;
}

.swatch {
width: 57px;
height: 45px;
display: inline-block;
float: left;
background-repeat: no-repeat;
padding: 5px;
background-position: center center;
margin-top: 8px;
}

 .swatch:hover {
border: thin solid #999;
background-position: center center;
}

.selected {
border: thin solid #999;
}

.sq562-white {
background-image: url(../images/products/women/lifeguard_girlstee_white.jpg);
}


.sq562-red {
background-image: url(../images/products/women/lifeguard_girlstee_red.jpg);
}
</style>

<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
// hide all the events
$("#bigCal p").hide();

$(".event a").click(function(evt) {
    evt.preventDefault();
    $("#bigCal p").hide();
    var id = $(this).attr('id');

    $("." + id).show();
});
});
});//]]>  

</script>

</head>
<body>
<li class="event">
    <a id="red" href="#" >
        <div class="swatch sq562-white"></div>
    </a>
 </li>

 <li class="event">
    <a id="blue" href="#">
        <div class="swatch sq562-red"></div>
    </a>
</li>
</ul> 


<div id="bigCal">
<p style="display: block; margin-top:25px; margin-bottom:-54px;" class="all blue"><a    title="Red">Red</a></p>
<p style="display: none; margin-top:25px; margin-bottom:-54px;" class="all red"><a title="White">White</a></p>

</div>


</body></html>
4

2 に答える 2

1

onclickクラスを追加するために使用します.selected（jQueryを使用し、JavaScriptのみを使用して実行することもできます）。

$(".swatch").click(function() {
    $(this).addClass("selected");
}
于 2013-03-06T23:40:03.690 に答える
0

こんにちは、このコードをテストすることもできます：

$(document).ready(function() {
// hide all the events
$("#bigCal p").hide();

$(".event a").click(function(evt) {
    evt.preventDefault();
    //remove the previous selected item
    $(".swatch").removeClass("selected");
    //select the current item
    $(".swatch", this).addClass("selected");
    $("#bigCal p").hide();
    var id = $(this).attr('id');
    $("." + id).show();
  });
});

そしてサンプル： http： //jsfiddle.net/SNUhB/2/

于 2013-03-06T23:51:04.577 に答える