如何使用CSS和jQuery

$('img').click(function() { 
 
    $('.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

img { 
 
    border: solid 1px red; 
 
    margin: 10px; 
 
} 
 
.selected { 
 
    background-color: yellow; 
 
    box-shadow: 0px 12px 22px 1px #333; 
 
} 
 
.image-rounded { 
 
border-radius: 6px; 
 
width: 140px; 
 
height: 140px; 
 
} 
 

 
.well { 
 
width: 100%; 
 
} 
 

 
.scroll { 
 
width: 100%; 
 
overflow: auto; 
 
white-space: nowrap; 
 
} 
 

 
.scroll a { 
 
display: inline-block; 
 
width: 140px; 
 
margin: 10px; 
 
} 
 

 
.scroll a img { 
 
width: 100%; 
 
} 
 

 
.scroll a:focus { 
 
border: 1px solid yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="well"> 
 
    <div class="scroll"> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    </div> 
 
</div>

後圖像的選擇要突出圖像我有一個網頁，選擇，能夠通過用戶的多張圖片。用戶只需點擊該圖像即可選擇任何圖像。我如何突出顯示選擇後的圖像。我如何突出顯示選定的圖像使用css或jquery

我點擊圖像時得到一個黃色輪廓。點擊圖像時應顯示陰影，直到我轉移到下一個圖像。

來源

2015-08-22 KSSandhya

我不明白的問題 –

代碼已經這樣做，檢查它。已經創建了腳本，只是添加了bg顏色來突出顯示它 –

這裏它在我的HTML完整頁面中做它不是在做 – KSSandhya

使用toggleClass('className')功能突出顯示所選圖像。以下是工作版本。

$('img').click(function() { 
 
    //New Code replaced here 
 
    $(this).toggleClass('selected'); 
 
});

img { 
 
    border: solid 1px red; 
 
    margin: 10px; 
 
} 
 
.selected { 
 
    background-color: yellow; 
 
    box-shadow: 0px 12px 22px 1px #333; 
 
} 
 
.image-rounded { 
 
border-radius: 6px; 
 
width: 140px; 
 
height: 140px; 
 
} 
 

 
.well { 
 
width: 100%; 
 
} 
 

 
.scroll { 
 
width: 100%; 
 
overflow: auto; 
 
white-space: nowrap; 
 
} 
 

 
.scroll a { 
 
display: inline-block; 
 
width: 140px; 
 
margin: 10px; 
 
} 
 

 
.scroll a img { 
 
width: 100%; 
 
} 
 

 
.scroll a:focus { 
 
border: 1px solid yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="well"> 
 
    <div class="scroll"> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' /> 
 
    </div> 
 
</div>

來源

2015-08-22 10:22:31 Masoom

如何使用CSS和jQuery

回答

相關問題