Change the iframe (embed bootstrap) according to the navigation bar button

Navigation
2

Example:  

Navigation: 

   <ul >
    <li><a href="#"><span>INICIO</span></a></li>
    <li><a href="#"><span>FACEBOOK</span></a></li>
    <li><a href="#"><span>STACKOVERFLOW</span></a></li>
  </ul>

Embed: 

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="index.php"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="www.facebook.com.br"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="http://pt.stackoverflow.com/"></iframe>
</div>

What I need:

Always start with the initial frame index.php when the person clicks on the menu in facebook , open the frame facebook and so on

    
asked by anonymous 14.10.2016 / 00:19

3 answers

2

You can also use the same frame, changing its target.

The frame must have a name in order to be referenced. In this example I put name="meuframe" 

<iframe name="meuframe" src="http://terra.com.br"></iframe>

Linksshouldhavetargettheframename:

<ul><li><ahref="http://uol.com.br" target="meuframe"><span>UOL</span></a></li>
  <li><a href="http://binds.co" target="meuframe"><span>Binds.co</span></a></li>
  <li><a href="http://codepen.io" target="meuframe"><span>Codepen</span></a></li>
</ul>

In this way, the frame loads with its normal src , and the links target the frame by changing its source.

See it working: link

    
18.10.2016 / 20:56
1

See this example to help you: 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><scripttype="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><script>functionaddTab(title,url){if($('#tt').tabs('exists',title)){$('#tt').tabs('select',title);}else{varcontent='<iframescrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
				$('#tt').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
			}
		}
	</script>
</head>
<body>
	<div style="margin-bottom:10px">
		<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
		<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
		<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
	</div>
	<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
		<div title="Home">
		</div>
	</div>
</body>
</html>

Example Link

    
17.10.2016 / 20:46
0

Another way to do it: 

var iframe = $(".embed-responsive-item");

$("#menu li a").click(function() {
  iframe.attr('src', $(this).data('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="menu">
  <li><a href="#" data-src="index.php"><span>INICIO</span></a></li>
  <li><a href="#" data-src="www.facebook.com.br"><span>FACEBOOK</span></a></li>
  <li><a href="#" data-src="http://pt.stackoverflow.com"><span>STACKOVERFLOW</span></a></li></ul><divclass="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="index.php"></iframe>
</div>
    
18.10.2016 / 21:11
How to make an HTML field mandatory? css select only first level