for循环读取json生成的HTML，怎么将添加的HTML分别添加点击事件实现效果图的效果（具体麻烦大神们看看代码和截图））

A、
B、本小白刚接触前端，有好些问题希望大神解答谢谢。A图是现今的情况，B图是要实现的效果。
for循环读取json生成的HTML，怎么将添加的HTML分别添加点击事件，然后分别将对应点击的数据插入到menu-middle内，并打开对应的网页。大谢各位大神，研究了两天就是不知道怎么动态实现这种效果谢谢基本代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>横屏导航</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style type="text/css">
body{
font-family: "微软雅黑";
color: white;
}
a:link{
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:hover{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
.wrapper{
width: 100%;
height: 100%;
background: #F2F2F2 no-repeat;
position: absolute;
overflow:scroll;
min-width: 1250px;
}
.top{
position: relative;
width: 100%;
height: 270px;
background: -webkit-linear-gradient(left top, #A0C4FC , #24B2A9); /* Safari 5.1 - 6.0 */  
background: -o-linear-gradient(bottom right, #A0C4FC, #24B2A9); /* Opera 11.1 - 12.0 */  
background: -moz-linear-gradient(bottom right, #A0C4FC, #24B2A9); /* Firefox 3.6 - 15 */ 
background: linear-gradient(to bottom right, #A0C4FC , #24B2A9); /* 标准的语法 */
background: -ms-linear-gradient(top left, #A0C4FC , #24B2A9);/*兼容IE*/
text-align: center;
}
.main-header{
position: relative;
width: 100%;
height: 89px;
border-bottom: 3px solid rgba(105,105,105,0.1);
margin: 0 auto;
}
.logo{
display:inline-block;
width: 270px;
height: 86px;
float: left;
line-height:80px;
font-size: 24px;
text-shadow:0 3px 9px rgba(0, 0, 0, .5);/*文字阴影 顺序为：阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色  加inset可设置内阴影*/
-webkit-text-shadow:0 3px 9px rgba(0, 0, 0, .5);/*兼容谷歌*/
-moz-text-shadow:0 3px 9px rgba(0, 0, 0, .5);/*兼容火狐*/
-ms-text-shadow:0 3px 9px rgba(0, 0, 0, .5);/*兼容IE9以上*/
-o-text-shadow:0 3px 9px rgba(0, 0, 0, .5);/*兼容欧朋*/
}
.menu{
cursor: pointer;
outline: none;
list-style: none;
float: left;
font-size: 18px;
display: inline-block;
font-family: "黑体";
}
.menu li,
.dj0{
float: left;
padding: 30px 40px;
display: inline-block;
height: 86px;
border-collapse: collapse;
}.menu li:hover,
.menu li:focus,
.dj1{
font-size: 20px;
font-weight: bold;
background: rgba(255,255,255,0.1);
padding: 30px 50px;
transition-duration:0.6s;/*指定经过后动画过度时间*/
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
}
.menu li:active{
padding: 35px 60px;
}
.menu-right1{
float: left;
text-decoration: none;
outline: none;
list-style: none;
cursor: pointer;
}
.bigger{
font-size: 20px;
}
.middle{
position: absolute;
width: 90%;
height: calc(100% - 140px);/*减去距离顶部的间隔防止底部多出出现垂直滚动条*/
top: 129px;
left: 5%;
overflow:hidden;

}
.middle1{
width: 100%;
height: 40px;
position: relative;
padding-left: 50px;
padding-right: 50px;
}.menu-middle li{
float: left;
display: inline-block;
outline: none;
list-style: none;
border-collapse: collapse;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
cursor: pointer;
padding:10px 25px;
height:40px;
}
.changeBj{
background:#fff;
font-weight:bold;
color:#787878;
}
.middle2-a{
width: 100%;
height: calc(100% - 40px);
background: #FFF;
z-index: 0;
position: absolute;
}
.show{
width: 100%;
border: 0;
height: 100%;
position: absolute;
overflow:hidden;
}
.x{
float:right;
margin-left:10px;
border:0;
color:#CCCCCC;
}
.x:hover{
color: #787878;
}
.xx{
float:right;
margin-left:10px;
border:0;
color:#F0F0F0;
}
.yincang{
display: none;
}
.xianshi{
display: block;
}
 </style>
</head><body>
<div class="container-fluid">
  <div class="row">
<div class="wrapper">
     <div class="top">
 
 <div class="main-header">
  <div class="logo">smart <strong>ME</strong></div> 
  <ul class="menu" id="heng">
      
     </ul> 
 
     
 </div>
        </div>
</div> 

<div class="middle">
  <div class="middle1">

         <ul class="menu-middle" id="biaoqian"> 
           
         </ul>
       
         </div>

<div class="ct-list middle2-a">

</div>

  </div>
 </div> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"> test = [
{MENUID:1,EN_DES:"百度",FUNCLINK:"https://www.baidu.com",FUNC:"",TYPE:""},
{MENUID:2,EN_DES:"搜狗",FUNCLINK:"https://www.sogou.com",FUNC:"",TYPE:""},
{MENUID:3,EN_DES:"360",FUNCLINK:"https://www.so.com",FUNC:"",TYPE:""},
{MENUID:4,EN_DES:"诛仙",FUNCLINK:"https://wanmei.zhuxian.com",FUNC:"",TYPE:""},
{MENUID:5,EN_DES:"淘宝",FUNCLINK:"https://www.taobao.com",FUNC:"",TYPE:""}
];

$(function(){
 
for(i=0;i<test.length;i++){

$("#heng").append("<a class ='ct-li menuA'  id =" + 'menu-'+ i +" > " + "<li id = " + 'menu-a' + i + " class ='dj'>" + test[i].EN_DES + "</li>" + "</a>") ;

   //$("#biaoqian").append( "<li class= 'ct-li biaoqianye' id=" + 'biaoqian' + i + ">" + test[i].EN_DES + "<span class='x'>" + 'x' + "</span>" + "</li>");

//$(".middle2-a").append( "<div class='item'>" + "<iframe id="+ 'show'+ i +" src="+ test[i].FUNCLINK +" class='show'>" + "</iframe>" + "</div>");
          
}; }); $(function(){
        $(".item").hide();//选择item类0之后的元素隐藏,为0的这个元素显示
        $(".biaoqianye").hide();
        //主要逻辑就在于找到选项卡和内容框相对应的下标
        $(".ct-li").unbind('click').click(function(){
            var _index = $(this).index();//获取点击元素的下标
            $(this).addClass("") //给点击的元素添加类
            .siblings().removeClass();//相邻元素隐藏类
            $(".item").eq(_index).show()
                .siblings().hide();//选择item元素中第_index个显示出来，相邻元素被隐藏
        })    });

$(document).ready(function (){// ready 事件
            $(".menu li").each(function(index){//便利对象
                $(this).click(function(){//点击触发事件
                    $(".menu-middle li").removeClass("changeBj");//删除当前元素的样式
                    $(".menu-middle li").eq(index).addClass("changeBj");//添加当前元素的样式
      
                });
            });
        });   $(document).ready(function (){
            $(".menu-middle li").each(function(index){
                $(this).click(function(){
                    $(".menu-middle li").removeClass("changeBj");
                    $(".menu-middle li").eq(index).addClass("changeBj");
                });
            });
        });</script>
 
</body>
</html>