2
私が使用しているタブのHTMLコードがあります。各タブでは、いくつかのボタンとテキストボックスを持つiFrameが必要です。タブは各iframeに切り替わるのではなく、何も起こりません。私の2番目のコードでは、タブの内容がすべて同時に表示されます。これは私が試したものですが、それはうまくいきませんでした：HTML/jQueryタブが失敗する
<html>
<head>
<title> iFrame Browser</title>
<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myIframe");
objFrame.src=document.getElementById("URL").value;
}
</script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
<style>
/* tab pane styling */
.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
</style>
</head>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="panes">
<div>
<div style="Clear:both;">
<input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back" onClick="myIframe.history.back()">
<input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward" onClick="myIframe.history.forward()">
<input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
<input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
</div>
<iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
<div>
<div style="Clear:both;">
<input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back" onClick="myIframe.history.back()">
<input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward" onClick="myIframe.history.forward()">
<input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
<input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
</div>
<iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
<div>
<div style="Clear:both;">
<input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back" onClick="myIframe.history.back()">
<input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward" onClick="myIframe.history.forward()">
<input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
<input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
</div>
<iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
もう一つは失敗：
<html>
<head>
<title> iFrame </title>
<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myIframe");
objFrame.src=document.getElementById("URL").value;
}
</script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
<script>
$(function() {
$("#tabs").tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 999
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<div style="Clear:both;">
<input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
<div id="tabs-2">
<div style="Clear:both;">
<input type="text" value="http://" class="frmUrlVal" ID="URL">
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
<div>
<iframe align="center" width="100%" height="90%" src="http://facebook.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
<div id="tabs-3">
<div style="Clear:both;">
<input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</div>
</div>
</div>
</body>
</html>
は私が間違って何をしたのですか？
なぜブラウザでブラウザを作成したいのですか？ –
まあ、私はコーディングの作業が好きです。 ：D – PrplNinja