2.2 点击div显示其innerHtml内容

时间:2021-07-25 15:21:18

中心主题:点击div显示其innerHtml内容

一、HTML结构

<div>
<div class="innerHtmlShow"><strong>中国海事局公布本月5号至11号</strong>中国海事局公布本月5号至11号,中国海军将在南海海域进行军事演习,引起国际媒体关注。但菲律宾外交部长亚赛对此则表示无需担忧。他称,只要不影响航行和飞越*,中国跟其他国家一样,有权在国际海域展开军事演习。</div>
<div class="innerHtmlShow"><i>中国海事局3号发布航行警告,中国海军</i>将于本月5号至11号,在海南岛以东以至整个西沙海域展开军事演习,期间禁止其他船只进入相关海域。日前也有报道指,解放军三大舰队多艘王牌军舰已经聚集在海南三亚军港,包括隶属北海舰队的导弹驱逐舰115舰,东海舰队的导弹驱逐舰139舰,以及导弹护卫舰595舰等。更有外媒分析,这一进展跟即将出炉的南海仲裁案裁决有关。声称,一旦裁决对中国不利,中方将在南海举行大规模军事演习,以宣示主权。海域展开军事演习。</div>
<div class="innerHtmlShow"><em>菲律宾外交部长亚赛4号回应菲国本地媒体询问</em>,菲方是否将针对中国在南海展开军演,对中国提出外交*或做出任何回应时表示,无需担忧这一进展,更称,在不影响航行和飞越*的情况下,中国跟其他国家一样,有权在国际海域展开军事演习。海域展开军事演习。</div>
</div>

二、css样式

  div{
            border:2px solid darkkhaki;
            width:300px;
            padding: 20px;
            margin:0px auto;
            margin-top: 20px;
            cursor: pointer;
        }

三、jquery

  (function($){
        $.fn.innerHtmlShow=function(){
            return this.each(function(){
                var that=$(this);
                that.find(".innerHtmlShow").click(function(){
                    alert($(this).html());
                });
            });
        };
    })(jQuery);
    $("div").innerHtmlShow();

四、最终效果

2.2 点击div显示其innerHtml内容