2013-04-22 85 views
1

我目前有一个链接到我的iframe左边的链接列表类似于一个菜单。但是,我很快意识到这不是一个可扩展的选项。我想要做的是创建一个简单的下拉菜单,其中包含我所有的链接,并让它们仍然在我的iframe中打开。下拉选项打开内部框架

我的一个链接的示例。

<li> 
    <a href="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm" 
    target="iframe1">CS1000 Name Change</a> 
</li> 
+0

您使用哪种语言? – 2013-04-22 23:54:45

+0

只是基本的HTML,我发现或帮助了一些有限的Java脚本。和一些php表单绑定到一个mysql数据库。 – user2309241 2013-04-23 00:00:43

回答

0

像这样

<select id='selectLinks'> 
    <option value='http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm'>CS1000 Name Change</option> 
    <option value='http://www.officedepot.com'>Go to Office Depot.com</option> 
</select> 

那么你就需要一些JavaScript来控制。我推荐jQuery库,因为它使这个简单。

编辑:更新我的例子,实际上是正确的。还有研究发现,谷歌犯规喜欢的iframe被打开,所以看起来它不工作,但它只是谷歌正在痛苦

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#selectLink").on("change", function(){ 
      var link = $(this).find("option:selected").val(); 
      $("#iframe1").attr("src", link); 
     });       

    }); 
</script> 

这是从我的头顶,我一直在饮用此如果你想在你的框架中打开ALL链接可能不准确

感谢

+0

给我一个,我会告诉你,如果这个工程。 – user2309241 2013-04-22 23:50:10

+0

建立了良好的下拉菜单,但不会显示在文档中。 – user2309241 2013-04-23 00:01:41

+0

好的,以及我忘了一些事情..看看这个小提琴,我会相应地更新我的答案http://jsfiddle.net/VqQMC/4/ – 2013-04-23 00:14:44

1

,那么你应该在你的文档的HEAD部分说明了这一事实

<head> 
    <base target="iframe1"> 
</head> 

我认为这就够了。

更新

好的这是另一种方法。

首先你的风格的链接,我只是使用这些stysles,但毫无疑问,你有自己的。

.menulink 
{ 
    color: #0000FF; 
    cursor: pointer; 
} 

.menulink:hover 
{ 
    color: #FF0000; 
    cursor: pointer; 
} 

接下来的代码来打开链接在iframe

<script type="text/vbscript" id="OpenInMyFrame"> 
    ' <!-- 
    Function OpenInMyFrame(LinkUrl) 
    window.document.getElementById("MyFrame1").src = LinkUrl 
    End Function 
    ' --> 
</script> 

最后你的链接和iframe

<ul id="MyMenu"> 
    <li class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</li> 
    <li class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</li> 
    <li class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</li> 
    <li class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</li> 
</ul> 
<iframe id="MyFrame1" name="MyFrame1" style="width: 1040px; height: 682px" src="Default.aspx"> 

</iframe> 




<select id="MyMenu"> 
    <option class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</option> 
    <option class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</option> 
    <option class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</option> 
    <option class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</option> 
</select> 

更新II

<script type="text/javascript"> 
    //<!-- 
    function OpenInMyFrame(var1) 
    { 
    window.document.getElementById("MyFrame1").src = var1; 
    } 
    //--> 
</script> 
+0

我只想要在下拉菜单中的链接在我的iframe中打开。 – user2309241 2013-04-23 00:14:45

+0

这看起来不像我的下拉菜单? – user2309241 2013-04-23 01:13:11

+0

对不起,我现在将其更改为下拉列表 – Zeddy 2013-04-23 01:16:02

0

绅士,谢谢你帮助。我能够使它与以下工作。我只是需要改变JavaScript来满足我的需求。非常感谢 !!

<script language="javascript" type="text/javascript"> 
function jump(form) { 
var myindex=form.menu.selectedIndex 
if (form.menu.options[myindex].value != "0") 
{ 
window.open(form.menu.options[myindex].value, 
target="iframe1"); 
} 
} 
//--> 
</script> 

<form name="lissamenu2" ACTION=URI> 
<select name="menu" onchange="jump(this.form)"> 
<option value="0">Select</option> 
<option value="0"></option> (this adds a space). 
<option value="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm">CS1000 Name Change</option> 
</select> 
</form>