单击li在同一页面上显示iframe中的内容

我有一个html页面，页面顶部显示一些菜单.under菜单有一些li。现在我想点击任何 li 并在 iframe 下方显示每个 li 的内容：

<div class='main_container'>
  
  <ul class="nav nav-tabs">
       <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
          Tea <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
         <li role="presentation"><a href="test.html">Tea1</a></li>
          <li role="presentation"><a href="test2.html">Tea2</a></li>
          
        </ul>
      </li>
      
       <div id="nav">
       <iframe id='link'></iframe>
      </div>
      </div>

谁能告诉我我该怎么做？