单击时显示图像

Question

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />


<link rel="stylesheet" href="font/icons/ionicon/css/ionicons.min.css" />
<link rel="stylesheet" href="css/base/materialize.min.css" />
<link rel="stylesheet" href="css/base/test.css" />
<link rel="stylesheet" href="css/base/post.css" />

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>


<body>

            <!--?php include '../header.php'?-->
            <div id="bg-overlay"> </div>

        <div class="container-fluid" id="main" style="display: block;">
            <!--?php echo $fout ?-->
            <div class="row" id="content">
                <div class="col s12">

                </div>
                <div class="post col l4 m6 s12">

                    <div class="col s6 offset-s3 post-image center no-padding" style="width: 202px; height: 202px; background: url(&quot;images/post/1.jpg&quot;) 0% 0% / 100% 100%;">
                        <div class="postdate" style="height: 202px; padding-top: 71px;"><span>23/6</span><br>12:00 am</div>
                    </div>

                    <div class="col s12 post-below no-padding waves-effect z-depth-3" style="margin-top: -71px;">
                        <label class="col s6 left no-padding">
                            <div id="up-vote"><i class="ion-star" style="font-size:28px;color:black"></i> <label class="up-vote"></label></div>
                        </label>
                        <label class="col s6 right no-padding">
                            <div id="down-vote"><i class="ion-info"></i>  <i class="fa fa-info-circle" style="font-size:28px;color:black"></i>
 <label class="down-vote"></label> </div>
                        </label>
                        <div class="col s12 post-head center truncate" style="padding-top: 57.3333px;">
                            Game Title
                        </div>
                        <hr class="post-head-bottom">
                        <div class="col s12 desp">
                            <div class="post-detail "></div>
                        </div>
                        <div class="row" id="bottom-row">
                        <div class="col s7 left auth no-padding">


                        </div>
                        <div class="col s5 right right-align comment-contain">
                                                        <a href="#">Know more</a>
                        </div>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /container -->


    <script src="js/post.js"></script>
    <script>    


        $(document).ready(function(){
            $.backstretch("images/back.png");

            if(newuser==1){
                $("#content").css('display','none');
            }


        })

    </script>
<div class="hiddendiv common"></div><div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 667px; width: 808px; z-index: -999999; position: fixed;"><img src="images/back.png" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 998.005px; height: 667px; max-height: none; max-width: none; z-index: -999999; left: -95.0025px; top: 0px;"></div></body>

当我点击星星时，它应该显示图像左侧显示的评级，当我点击信息（i 符号）时，它应该显示游戏信息，如图所示在图像的右侧。

/css/base/post.css/

@keyframes fillup {
    from {width:0%}
    to {width:75%}
}



@media(max-width:992px){
    .comment-contain,.auth{padding-top:50px !important}
    .auth-name{font-size:16px !important}
}
@media(min-width:993px){    
    .comment-contain,.auth{padding-top:50px !important}
}








#content{color:#90a4ae;position: absolute;top:130px;right: 0;left: 0;}
.post{margin-bottom:20px}
/*  post image*/

.post>div.post-image{background:#4fc3f7;border-radius:50%;z-index:2;position:relative;width:100%;background-position:center !important;
-webkit-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
-moz-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
box-shadow: 0px 0px 14px 2px rgba(33,33,33,1);
transition:1s all ease;-webkit-transition:1s all ease;-moz-transition:1s all ease;-ms-transition:1s all ease;
}
.post>div.post-image:hover{background-size:150% 150% !important;cursor: pointer;}

.postdate{font-size:20px;color:#fff;font-weight:700;background:rgba(21,21,21,0.5);border-radius:50%;opacity:0;text-align:center;
transition:0.3s all ease;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;}
.postdate>span{font-size:30px;font-weight:300}
.post>div.post-image:hover .postdate{opacity:1}
/* votes*/
.vote{font-size:20px;color: #e0e0e0;}

#up-vote,#down-vote{font-size:20px;color:#e0e0e0;line-height:35px;font-weight:300;margin-top:10px;
transition:0.3s all ease-in;-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;-ms-transition:0.3s all ease-in;}

#up-vote{margin-left:20px}
#down-vote{text-align:right;margin-right:20px}
.up-vote,.down-vote{font-size:20px;color:#e0e0e0}

/* below*/
.post-below{border:2px solid #e0e0e0;color:#e0e0e0;border-radius:5px;z-index:1;position:relative;}
/*post date & time*/

.post-head{font-size:25px;font-weight:500;}
.post-head-bottom{float:left;animation:fillup 2s;-webkit-animation: fillup 2s;-moz-animation: fillup 2s;width:75%;height:2px;background:#fff}
.post-detail{height:50px;}

.comment-contain,.auth{padding-top:20px}
.comment{border:2px solid #ffd54f ;padding:10px;font-weight:500;color:#e0e0e0;background:rgba(255,213,79,0.5);}

.auth-img{width:40px;height:40px;border-radius:50%}
.auth-name{color:#e0e0e0;font-size:18px;font-weight:300;line-height:40px}

Answer 1

你可以用简单的 javascript 来做到这一点，有 2 个内容不同的 div 并隐藏一个。

在HTML

<div id="container">
  <button id="btnChange">Change Content</button>
  <div id="red">
    This is red content
  </div>
  <div id="blue">
    This is blue content
  </div>

在CSS

#container {
  width:100%;
  height: 100px;
  background-color: green;
  text-align: center;
}

#red {
  width:100%;
  height: 100%;
  background-color: red;
}

#blue{
  width:100%;
  height: 100%;
  background-color: blue;
  display: none;
}

在jquery

  $(document).ready(function () {
                var content = "red";
        $("#btnChange").click(
            function () {
                if(content == "red"){
                  $("#red").hide();
                  $("#blue").show();
                  content = "blue";
                }else if (content == "blue"){
                    $("#blue").hide();
                  $("#red").show();
                  content = "red";
                }
            }            
        );
    });

这是一个fiddle

单击时显示图像

Showing images on click

html

javascript

css