Question

我正在尝试创建一个以iframe为目标的菜单，但也会在点击后在单独的div中显示文字。

例如：
•单击菜单项1.
•“https://wikipedia.org”已加载到iframe中 •维基百科页面的地址显示在单独的div中。

使用我在这里找到的一些代码，我已经能够使菜单显示我想要的文本，但我无法同时定位iframe。

使用查询可能更好吗？

任何帮助都会很棒！

（Javascript功能将点击的链接变为红色）。

var Lst;

function changecolor(obj) {
    if (Lst) Lst.style.color = "#663399";
    obj.style.color = "red";
    Lst = obj;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
.menu {
  font-size: 13px;
  width: 260px;
  height: 350px;
  left: 8px;
}
#tabs p {
  display: none;
  font-size: 13px;
}
#tabs p.tab1:target {
  display: block;
}
#tabs p.tab2:target {
  display: block;
}
#tabs p.tab3:target {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="tabs" class="menu">

    <a href="#tab1" class="nav-tab tab1" onclick="changecolor(this)">
	Menu item 1<br><br></a>

    <a href="#tab2" class="nav-tab nav-tab-active tab2" onclick="changecolor(this)">
	Menu item 2<br><br></a>

    <a href="#tab3" class="nav-tab nav-tab-active tab3" onclick="changecolor(this)">
	Menu item 3<br><br></a>

    <p id='tab1' class='tab1'>
      <a href="https://www.wikipedia.org">"https://www.wikipedia.org"</a>
    </p>

    <p id='tab2' class='tab2'>
      <a href="http://dictionary.reference.com">"http://dictionary.reference.com"</a>
    </p>

    <p id='tab3' class='tab3'>
      <a href="http://www.thesaurus.com">"http://www.thesaurus.com"</a>
    </p>

  </div>

</body>

Answer 1

这就是我使用 JQuery ：

的方法

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
	<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>

<div ng-app="myApp">
  <div class="col-sm-8" ng-controller="ReportsController">
	<div class="col-sm-12 page-top-actions">
	    <div class="col-sm-3 day-wise-report">
	      <input type="date" name="report" tooltip="Day" onchange="updateChart()">
	    </div>
	    <div class="col-sm-3 show-report">
	        <button class="btn btn-default" type="submit">Show Report</button>
	    </div>
	</div>
	<select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart"
	        ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>

	<div fusioncharts
	        id="exampleId"
	        width="800"
	        height="400"
	        type="gantt"
	        datasource="{{productivityReportData}}">
	</div>
</div>

Here is the JSFiddle demo

（请注意，除了维基百科之外，你添加的另外两个链接不是自己加载的，它们也没有加载到iframe中。你可能想尝试使用其他链接:)）

定位iframe并同时显示文字？

1 个答案: