怎么调用相同的class 实现多个一样的效果

<div class="div">
<a href="javascript:;" class="btn">点击</a>
</div>
<div class="xs">111111</div>
我是想要有多个这样的效果 调用相同的class

解决方案 »

  1.   

    <div class="div">
    <a href="javascript:;" class="btn">点击</a>
    </div>
    <div class="xs">111111</div>
    我是想要有多个这样的效果 调用相同的class说明白点 没看明白 吧你要的效果的html写出来
      

  2.   

    <div class="div">
    <a href="javascript:;" class="btn">点击</a>
    </div>
    <div class="xs">111111</div>
    我是想要有多个这样的效果 调用相同的class说明白点 没看明白 吧你要的效果的html写出来<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>评论</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    li{ 
       list-style:none;
    }
     .plun_con_shang{
    width:705px;
    float:left;
    margin-top:15px;
    display:inline;
    }
     .shang_right{
    float:right;
    width:640px;
    }
     .sr_li1{
    line-height:20px;
    color:#313131;
    }
     .sr_li1 span{
    color:#7D7D7D;
    }
     .sr_li2{
    line-height:20px;
    width:640px;
    }
     .sr_li3{
    color: #7D7D7D;
    width:640px;
    }
    .sr_li3 span{
    color:#F39500;
    }
     .plun_con_xia{
    float: left;
    width: 640px;
    padding-bottom:10px;
    border:1px solid #DCDCDC;
    background:#EEEEEE;
    position:relative;
    margin-left:60px;
    margin-top:15px;
    display: inline;
    }
    .plun_con_xia .xia_ul1{
    float: left;
    margin:10px 0 0 20px;
    display: inline;
    color: #313131;
    width:620px;
    }
    .plun_con_xia .xia_ul1 li{
    width: 620px;
    float: left;
    line-height: 20px;
    }
    .plun_con_xia .xia_ul1 span{
    color:#7D7D7D;
    }
    .plun_yc_d{
    width:640px; 
    float:left; 
    margin:10px 60px 0; 
    display:none;
    }
    .plun_con_shang_yc{
    width:640px;
    float:left;
    margin-top:15px;
    display:inline;
    }
    .plun_con_shang_yc .yc_btn{
    background:#EEEEEE;
        border: 1px solid #DCDCDC;
        border-radius: 3px;
        color: #959595;
        float: right;
        font-size: 15px;
        font-weight: bold;
        height: 28px;
        line-height: 28px;
        text-align: center;
        width: 88px;
    }
    .shangb_right_plun_yc{
    width:640px;
    float:left;
    }
    .shangb_right_plun_yc .yc_textarea{
    width:638px;
    height:70px;
    float:left;
    border:1px solid #DCDCDC;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        $(".pinglun_yc_btn").click(function(){
    $(".plun_yc_d").toggle();
    })
    $(".yc_btn").click(function(){
    $(".plun_yc_d").css('display','none');
    })
    });
    </script>
    </head><body>
    <!--点评开始-->
         <div style="width:705px;float:left;">
          <div class="plun_con_shang">
           <div class="shang_right">
            <ul>
             <li class="sr_li1">97fei<span>-7月1日 15:06:06</span></li>
             <li class="sr_li2">很详细</li>
             <li class="sr_li3">整体评价：<span>4.9</span>分 <a href="javascript:;" class="pinglun_yc_btn">回复</a>
             </li>
            </ul>
           </div>       
          </div>
          <div class="plun_con_xia">
           <ul class="xia_ul1">
            <li>超龄老猫 <span>-7月1日 20:06:06</span></li>
            <li>游记很</li>
           </ul>
          </div>
          </div>
    <div class="plun_yc_d">
           <div class="shangb_right_plun_yc">
            <textarea class="yc_textarea"></textarea>
            </div>
            <div class="plun_con_shang_yc">
           <a class="yc_btn" href="javascript:;">添加评论</a>
          </div>
          </div>
     <!--点评结束-->
    </body>
    </html>
    看看 比如我有多个这个的点评 就是调用相同的class来实现
      

  3.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>评论</title>
    <style>
    *{
        margin:0;
        padding:0;
        }
    li{ 
       list-style:none;
    }
     .plun_con_shang{
        width:705px;
        float:left;
        margin-top:15px;
        display:inline;
        }
     .shang_right{
        float:right;
        width:640px;
        }
     .sr_li1{
        line-height:20px;
        color:#313131;
        }
     .sr_li1 span{
        color:#7D7D7D;
        }
     .sr_li2{
        line-height:20px;
        width:640px;
        }
     .sr_li3{
        color: #7D7D7D;
        width:640px;
        }
    .sr_li3 span{
        color:#F39500;
        }
     .plun_con_xia{
        float: left;
        width: 640px;
        padding-bottom:10px;
        border:1px solid #DCDCDC;
        background:#EEEEEE;
        position:relative;
        margin-left:60px;
        margin-top:15px;
        display: inline;
        }
    .plun_con_xia .xia_ul1{
        float: left;
        margin:10px 0 0 20px;
        display: inline;
        color: #313131;
        width:620px;
        }
    .plun_con_xia .xia_ul1 li{
        width: 620px;
        float: left;
        line-height: 20px;
        }
    .plun_con_xia .xia_ul1 span{
        color:#7D7D7D;
        }
    .plun_yc_d{
        width:640px; 
        float:left; 
        margin:10px 60px 0; 
        display:none;
        }
    .plun_con_shang_yc{
        width:640px;
        float:left;
        margin-top:15px;
        display:inline;
        }
    .plun_con_shang_yc .yc_btn{
        background:#EEEEEE;
        border: 1px solid #DCDCDC;
        border-radius: 3px;
        color: #959595;
        float: right;
        font-size: 15px;
        font-weight: bold;
        height: 28px;
        line-height: 28px;
        text-align: center;
        width: 88px;
        }
    .shangb_right_plun_yc{
        width:640px;
        float:left;
        }
    .shangb_right_plun_yc .yc_textarea{
        width:638px;
        height:70px;
        float:left;
        border:1px solid #DCDCDC;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        // $(".pinglun_yc_btn").click(function(){
        //     $(".plun_yc_d").toggle();
        //     })
        $(".yc_btn").click(function(){
            $(".plun_yc_d").css('display','none');
            })
    });
     function replay(obj){  var plunObj = $(obj).closest('div.plun_con_shang').parent().next('div.plun_yc_d');
      $(plunObj).toggle();
     }
    </script>
    </head>
     
    <body>
    <!--点评开始-->
         <div style="width:705px;float:left;">
          <div class="plun_con_shang">
           <div class="shang_right">
            <ul>
             <li class="sr_li1">97fei<span>-7月1日 15:06:06</span></li>
             <li class="sr_li2">很详细</li>
             <li class="sr_li3">整体评价：<span>4.9</span>分 <a href="javascript:;" class="pinglun_yc_btn" onclick="replay(this);">回复</a>
             </li>
            </ul>
           </div>       
          </div>
          <div class="plun_con_xia">
           <ul class="xia_ul1">
            <li>超龄老猫 <span>-7月1日 20:06:06</span></li>
            <li>游记很</li>
           </ul>
          </div>
          </div>
    <div class="plun_yc_d">
           <div class="shangb_right_plun_yc">
            <textarea class="yc_textarea"></textarea>
            </div>
            <div class="plun_con_shang_yc">
           <a class="yc_btn" href="javascript:;">添加评论</a>
          </div>
          </div>
     <!--点评结束-->
    <!--点评开始-->
         <div style="width:705px;float:left;">
          <div class="plun_con_shang">
           <div class="shang_right">
            <ul>
             <li class="sr_li1">97fei<span>-7月1日 15:06:06</span></li>
             <li class="sr_li2">很详细</li>
             <li class="sr_li3">整体评价：<span>4.9</span>分 <a href="javascript:;" class="pinglun_yc_btn" onclick="replay(this);">回复</a>
             </li>
            </ul>
           </div>       
          </div>
          <div class="plun_con_xia">
           <ul class="xia_ul1">
            <li>超龄老猫 <span>-7月1日 20:06:06</span></li>
            <li>游记很</li>
           </ul>
          </div>
          </div>
    <div class="plun_yc_d">
           <div class="shangb_right_plun_yc">
            <textarea class="yc_textarea"></textarea>
            </div>
            <div class="plun_con_shang_yc">
           <a class="yc_btn" href="javascript:;">添加评论</a>
          </div>
          </div>
     <!--点评结束--></body>
    </html>还是不是很明白你的意思 你看下是不是这样的
      

  4.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>评论</title>
    <style>
    *{
        margin:0;
        padding:0;
        }
    li{ 
       list-style:none;
    }
     .plun_con_shang{
        width:705px;
        float:left;
        margin-top:15px;
        display:inline;
        }
     .shang_right{
        float:right;
        width:640px;
        }
     .sr_li1{
        line-height:20px;
        color:#313131;
        }
     .sr_li1 span{
        color:#7D7D7D;
        }
     .sr_li2{
        line-height:20px;
        width:640px;
        }
     .sr_li3{
        color: #7D7D7D;
        width:640px;
        }
    .sr_li3 span{
        color:#F39500;
        }
     .plun_con_xia{
        float: left;
        width: 640px;
        padding-bottom:10px;
        border:1px solid #DCDCDC;
        background:#EEEEEE;
        position:relative;
        margin-left:60px;
        margin-top:15px;
        display: inline;
        }
    .plun_con_xia .xia_ul1{
        float: left;
        margin:10px 0 0 20px;
        display: inline;
        color: #313131;
        width:620px;
        }
    .plun_con_xia .xia_ul1 li{
        width: 620px;
        float: left;
        line-height: 20px;
        }
    .plun_con_xia .xia_ul1 span{
        color:#7D7D7D;
        }
    .plun_yc_d{
        width:640px; 
        float:left; 
        margin:10px 60px 0; 
        display:none;
        }
    .plun_con_shang_yc{
        width:640px;
        float:left;
        margin-top:15px;
        display:inline;
        }
    .plun_con_shang_yc .yc_btn{
        background:#EEEEEE;
        border: 1px solid #DCDCDC;
        border-radius: 3px;
        color: #959595;
        float: right;
        font-size: 15px;
        font-weight: bold;
        height: 28px;
        line-height: 28px;
        text-align: center;
        width: 88px;
        }
    .shangb_right_plun_yc{
        width:640px;
        float:left;
        }
    .shangb_right_plun_yc .yc_textarea{
        width:638px;
        height:70px;
        float:left;
        border:1px solid #DCDCDC;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        // $(".pinglun_yc_btn").click(function(){
        //     $(".plun_yc_d").toggle();
        //     })
        // $(".yc_btn").click(function(){
        //     $(".plun_yc_d").css('display','none');
        //     })
    });
     function hide(obj){
      $(obj).closest('div.plun_yc_d').css('display','none');
     }
     function replay(obj){  var plunObj = $(obj).closest('div.plun_con_shang').parent().next('div.plun_yc_d');
      $(plunObj).toggle();
     }
    </script>
    </head>
     
    <body>
    <!--点评开始-->
         <div style="width:705px;float:left;">
          <div class="plun_con_shang">
           <div class="shang_right">
            <ul>
             <li class="sr_li1">97fei<span>-7月1日 15:06:06</span></li>
             <li class="sr_li2">很详细</li>
             <li class="sr_li3">整体评价：<span>4.9</span>分 <a href="javascript:;" class="pinglun_yc_btn" onclick="replay(this);">回复</a>
             </li>
            </ul>
           </div>       
          </div>
          <div class="plun_con_xia">
           <ul class="xia_ul1">
            <li>超龄老猫 <span>-7月1日 20:06:06</span></li>
            <li>游记很</li>
           </ul>
          </div>
          </div>
    <div class="plun_yc_d">
           <div class="shangb_right_plun_yc">
            <textarea class="yc_textarea"></textarea>
            </div>
            <div class="plun_con_shang_yc">
           <a class="yc_btn" href="javascript:;" onclick="hide(this);">添加评论</a>
          </div>
          </div>
     <!--点评结束-->
    <!--点评开始-->
         <div style="width:705px;float:left;">
          <div class="plun_con_shang">
           <div class="shang_right">
            <ul>
             <li class="sr_li1">97fei<span>-7月1日 15:06:06</span></li>
             <li class="sr_li2">很详细</li>
             <li class="sr_li3">整体评价：<span>4.9</span>分 <a href="javascript:;" class="pinglun_yc_btn" onclick="replay(this);">回复</a>
             </li>
            </ul>
           </div>       
          </div>
          <div class="plun_con_xia">
           <ul class="xia_ul1">
            <li>超龄老猫 <span>-7月1日 20:06:06</span></li>
            <li>游记很</li>
           </ul>
          </div>
          </div>
    <div class="plun_yc_d">
           <div class="shangb_right_plun_yc">
            <textarea class="yc_textarea"></textarea>
            </div>
            <div class="plun_con_shang_yc">
           <a class="yc_btn" href="javascript:;">添加评论</a>
          </div>
          </div>
     <!--点评结束--></body>
    </html>
      

  5.   

    <a class="yc_btn" href="javascript:;" onclick="hide(this);">添加评论</a>