js代碼寫(xiě)完為什么點(diǎn)擊沒(méi)有效果 求解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
?? ?<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
?? ?<title>海報(bào)畫(huà)廊</title>
?? ?<style type="text/css">
?? ?*{padding:0;margin:0;}
?? ?body{background-color:#fff;
?? ??? ?color:#555;
?? ??? ?font-family:'Avenir Next','Lantinghei SC';
?? ??? ? font-size: 14px;
?? ??? ? -webkit-font-smoothing:antialiased;
?? ?}
?? ?
?? ?
?? ?.photo{
?? ??? ?width:260px;
?? ??? ?height:320px;
?? ??? ?position: absolute;
?? ??? ?z-index: 1;
?? ??? ?box-shadow: 0 0 1px rgba(0,0,0,.01);
?? ?}
?? ?.photo .side{
?? ??? ?width:100%;
?? ??? ?height:100%;
?? ??? ?background: #eee;
?? ??? ?position: absolute;
?? ??? ?top:0;
?? ??? ?right:0;
?? ??? ?padding: 20px;
?? ??? ?box-sizing: border-box;
?? ?}
?? ?.photo .side-front{}
?? ?.photo .side-front .image{
?? ??? ?width: 100%;
?? ??? ?height: 250px;
?? ??? ?line-height: 250px;
?? ??? ?overflow:hidden;
?? ?}
?? ?.photo .side-front .image img{
?? ??? ?widows: 100%;
?? ?}
?? ?.photo .side-front .caption{
?? ??? ?text-align: center;
?? ??? ?font-size: 16px;
?? ??? ?line-height: 50px;
?? ?}?? ?
?? ?.photo .side-back{
?? ??? ?color:#666;
?? ??? ?font-size:14px;
?? ??? ?line-height: 1.5em;
?? ?}
?? ?.photo_center{
?? ??? ?left:50%;
?? ??? ?top:50%;
?? ??? ?margin:-160px 0 0 -130px;
?? ??? ?z-index: 99;
?? ?}
?? ?.wrap{
?? ??? ?width:100%;
?? ??? ?height: 600px;
?? ??? ?position: absolute;
?? ??? ?top: 50%;
?? ??? ?margin-top: -300px;
?? ??? ?background:#333;
?? ??? ?overflow: hidden;
?? ??? ?-webkit-perspective:8000px;
?? ?}
?? ?.photo-wrap{
?? ??? ?position: absolute;
?? ??? ?width:100%;
?? ??? ?height: 100%;
?? ??? ?-webkit-transform-style:preserve-3d;
?? ??? ?-webkit-transition:all .7s;
?? ?}
?? ?.photo-wrap .side-front{
?? ??? ?-webkit-transform:rotateY(0deg);
?? ?}
?? ?.photo-wrap .side-back{
?? ??? ?-webkit-transform:rotateY(180deg);
?? ?}
?? ?.photo-wrap .side{
?? ??? ?-webkit-backface-visibility:hidden;
?? ?}
?? ?.photo_front .photo-wrap{
?? ??? ?-webkit-transform:rotateY(0deg);
?? ?}
?? ?.photo_back .photo-wrap{
?? ??? ?-webkit-transform:rotateY(180deg);
?? ?}
</style>
</head>
<body oneselectstart="return false;">
?? ?<div>
?? ??? ?<div class="photo photo_center? photo_front" onclick="turn(this)">
?? ??? ??? ?<div >
?? ??? ??? ??? ?<div class="side side-front">
?? ??? ??? ??? ??? ?<p><img src="1 超能陸戰(zhàn)隊(duì).jpg" style="width:240px;"/></p>
?? ??? ??? ??? ??? ?<p>超能陸戰(zhàn)隊(duì)</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="side side-back">
?? ??? ??? ??? ??? ?<p>描述信息</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
?? ?<script type="text/javascript">
?? ??? ??? ?function turen (elem){
?? ??? ??? ??? ?var elem.className;
?? ??? ??? ??? ?if(/photo_front/.test(cls)){
?? ??? ??? ??? ??? ?cls=cls.replace(/photo_front/,'photo_back');
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?cls=cls.replace(/photo_back/,'photo_front');
?? ??? ??? ??? ?}
?? ??? ??? ??? ?return elem.className=cls;
?? ??? ??? ?}
?? ?</script>
</body>
</html>
2019-01-02
肯定報(bào)錯(cuò)??? ? ?var elem.className;? 你獲取這個(gè)dom的類名 但是沒(méi)給他賦值
而且你點(diǎn)擊事件調(diào)用的函數(shù)名都對(duì)不上號(hào)，上哪執(zhí)行去
2018-12-29
js 你寫(xiě)的方法不對(duì) 并且是var?elem.className 你寫(xiě)的是相當(dāng)于聲明了這么個(gè)變量而不是給他取值，你可以console.log打印一下腳本
2017-04-27
1、是turn()不是turen()
2、var??cls = ?elem.className; 不是???var elem.className;