Javascript 在单击按钮时加载选项卡
我对按钮Javascript 在单击按钮时加载选项卡,javascript,jquery,html,Javascript,Jquery,Html,我对按钮html或jquery不太熟悉,所以如果这是一个重复的问题或我问错了,请原谅。我要做的是在外部按钮单击时加载选项卡。选项卡的代码如下所示: <div id="wrapper"> <div id="content"> <div class="c1"> <div class="controls"> </div> <div clas
html
或jquery
不太熟悉,所以如果这是一个重复的问题或我问错了,请原谅。我要做的是在外部按钮单击时加载选项卡。选项卡的代码如下所示:
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo"><a href="#">lg</a></strong>
<ul class="tabset buttons">
<li class="active">
<a href="#tab-1" class="ico1"><span>Dashboard</span><em></em></a>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<a href="#tab-2" class="ico2"><span>Map visualization</span><em></em></a>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<a href="#tab-3" class="ico3"><span>Trending</span><em></em></a>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
任何帮助都会很有帮助:)我不知道如何把这个问题说得更清楚。希望可以理解,谢谢:)我认为这会奏效,但我相信还有更简洁的方法
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
更新:这确实有效(请确保将类和id选择器更改为您的命名约定),如测试所示
当用户点击侧边栏时使用的代码与他们点击按钮时使用的代码相同。嗯……正如你所看到的,它使用的href
对如何使用它有点困惑。说到这些,我是个笨蛋。我会试试看:)谢谢@ExplosionPillsOh,您使用的是jQuery UI.tabs
?嗯……这是我为仪表板下载的一个模板,没有关于所用内容的文档:(@explosionpills谢谢你的回复..我会试试这个,然后告诉你:)嗯,好的,对不起。我不太擅长jquery。关于故意晦涩的语法的一些东西让我很反感。我2.我还是搞不懂:P无论如何,谢谢你的帮助:)
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});