Why does not the external link to other sites work?

$(document).ready(function(){ $('#cont').tabs(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div id="cont"> <ul> <li><a href="https://www.yandex.ru/">Первая</a></li> <li><a href="https://www.yandex.ru/">Третья</a></li> </ul> </div>

  • Seeing because the tabs() function hangs its event handler on a click on the links, parses them for anchors, for example, and prevents default behavior further. - SLy_huh
  • @SLy_huh there the essence of the plug-in is that it should show the indicated links :) download content via ajax and show it somehow - teran

2 answers 2

Just tabs hangs its terms on the elements. So it works:

 $(document).ready(function(){ $('#cont').tabs(); $('#cont a').on("click",function(){ $('#frame').src = $(this).attr('href'); }) }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" /> <div id="cont"> <ul> <li><a href="https://www.yandex.ru/">Первая</a></li> <li><a href="https://www.yandex.ru/">Третья</a></li> </ul> <iframe width="400" height="400" name="panel" id="frame"></iframe> </div>

  • And you can make the links open directly in the panel? - PeGaS
  • I added an iframe, only Yandex does not open in the iframe - L. Vadim

Because CORS , or rather the Same Origin Policy, will not allow receiving data from another site.

You can try to use iframe'y, but serious sites and it will not allow.