如何在HTML CSS Javascript中完全显示onclick事件上的隐藏选项卡
我在这里有一个小的工作项目。请检查这里的演示：我只需要通过完全隐藏选项卡来对此进行小的更改。所以当我运行这个项目时，只有一个选项卡应该是可见的。通过单击图像，只有tab2应该可见。当点击tab2上的过滤器按钮时，只有tab1应该是可见的。所以基本上我只想只看到1个选项卡。有什么帮助吗？谢谢 这是我的密码：如何在HTML CSS Javascript中完全显示onclick事件上的隐藏选项卡,javascript,jquery,html,css,tabs,Javascript,Jquery,Html,Css,Tabs,我在这里有一个小的工作项目。请检查这里的演示：我只需要通过完全隐藏选项卡来对此进行小的更改。所以当我运行这个项目时，只有一个选项卡应该是可见的。通过单击图像，只有tab2应该可见。当点击tab2上的过滤器按钮时，只有tab1应该是可见的。所以基本上我只想只看到1个选项卡。有什么帮助吗？谢谢 这是我的密码： <html> <head> <meta charset="utf-8"> <title>Dashboards</tit
<html>
<head>
<meta charset="utf-8">
<title>Dashboards</title>
<style>
body {
padding: 5px;
}
margin : 5px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}
body {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}
.tab-links {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}
.tab-links ul, .tab-links li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}
.tab-links a:link, .tab-links a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
.tab-links a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
.tab-links a:hover {
color : #f00;
}
body.tabs .tab-links li#nav-1 a,
body.tabs .tab-links li#nav-2 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
.tab-links #subnav-1,
.tab-links #subnav-2 {
display : none;
width: 90%;
}
body.tabs .tab-links ul#subnav-1,
body.tabs .tab-links ul#subnav-2 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}
body.tabs .tab-links ul#subnav-1 a,
body.tabs .tab-links ul#subnav-2 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
.tab-links ul a:hover {
color : #f00 !important;
}
#contents {
background : #fff;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}
#phones {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 15px 25px 0 0;
border-collapse: collapse;
text-align: left;
float: left;
}
#phones th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 0px 1px;
border-bottom: 12px solid #6678b1;
}
#phones td {
border-bottom: 0px solid #ccc;
color: #669;
padding: 1px 1px;
}
#phones tbody tr:hover td {
color: #009;
}
#filter {
float:left;
}
fieldset{
margin-top: 15px;
}
fieldset div{
padding:0 0 5px 0;
}
.amount{
width:50px;
}
.active a{color:red !important; background-color:#fff !important}
.tab{display:none}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="nav-1" class='active'><a href="#tab1">Fahrzeuge</a></li>
<li id="nav-2"><a href="#tab2">Edit Fahrzeuge</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab" style='display:block'>
<table id="phones">
<thead>
<img id="filtered" src="edit.png" width="20" height="20" style="margin-top:20px; margin-left:10px; float: center;" >
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="tab2" class="tab">
<input type="checkbox" id="Anzahl_Fahrzeuge_mit_und_ohne_Bilder" checked />
<label for="Anzahl_Fahrzeuge_mit_und_ohne_Bilder">Anzahl_Fahrzeuge_mit_und_ohne_Bilder</label><br>
<input type="checkbox" id="Fahrzeuge_ohne_Preis" checked />
<label for="Fahrzeuge_ohne_Preis">Fahrzeuge_ohne_Preis</label>
<button id="submitFilter">Filter</button>
</div>
</div>
<script>
$(document).ready(function(){
function makeTable(data){
var tbl_body = "";
$.each(data, function() {
var tbl_row = "",
currRecord = this;
$.each(this, function(k , v) {
if(k==='model'){
v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
} else if (k==='price'){
v = "<span class='price'>" + v + "</span>";
}
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
return tbl_body;
}
function getPhoneFilterOptions() {
var opts = [];
$("input[type=checkbox]").each(function () {
if (this.checked) {
opts.push($(this).attr("id"));
}
});
return opts;
}
function updatePhones(opts){
if(!opts || !opts.length){
opts = allBrands;
}
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#phones tbody').html(makeTable(records));
}
});
}
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// alert('.tabs ' + currentAttrValue);
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
updatePhones(opts);
$('.tab-content #tab1').show().siblings().hide();
e.preventDefault();
});
$("#filtered").on("click", function () {
$('.tab-content #tab2').show().siblings().hide();
e.preventDefault();
});
var allBrands = [];
$("input[type=checkbox]").each(function(){
allBrands.push($(this)[0].id)
})
updatePhones();
});
</script>
</body>
</html>
仪表盘
身体{
填充物：5px；
}
保证金：5px；
字体：Verdana，Helvetica，Arial；
填充：0px；
背景：#fff；
}
身体{
利润率：10px；
字体：Verdana，Helvetica，Arial；
填充：0px；
背景：#fff；
}
.选项卡链接{
边框底部：1px实心#ccc；
保证金：0；
垫底：19px；
左侧填充：10px；
}
.tab链接ul、.tab链接li{
显示：内联；
列表样式类型：无；
保证金：0；
填充：0；
}
.tab链接a:链接，.tab链接a:已访问{
背景：E8EBF0；
边框：1px实心#ccc；
颜色：#666；
浮动：左；
字体大小：小；
字体大小：正常；
线高：14px；
右边距：8px；
填充：2x10px 2x10px；
文字装饰：无；
}
.tab链接a:link.active，#菜单a:visted.active{
背景：#fff；
边框底部：1px实心#fff；
颜色：#000；
}
.选项卡链接a：悬停{
颜色：#f00；
}
body.tabs.tab链接li#nav-1A，
body.tabs.tab链接li#nav-2A{
背景：#fff；
边框底部：1px实心#fff；
颜色：#000；
}
.tab链接#子AV-1，
.tab链接#子AV-2{
显示：无；
宽度：90%；
}
body.tabs.tab链接ul#subnav-1，
body.tabs.tab链接ul#subnav-2{
显示：内联；
左：10px；
位置：绝对位置；
顶部：95px；
}
body.tabs.tab链接ul#subnav-1A，
body.tabs.tab链接ul#subnav-2 a{
背景：#fff；
边界：无；
左边框：1px实心#ccc；
颜色：#999；
字体大小：较小；
字体大小：粗体；
线高：10px；
保证金权利：4px；
填充：2x10px 2x10px；
文字装饰：无；
}
.tab链接ul a：悬停{
颜色：#f00！重要；
}
#内容{
背景：#fff；
边框：1px实心#ccc；
边界顶部：无；
明确：两者皆有；
边际：0px；
填充：15px；
}
#电话{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字体大小：12px；
背景：#fff；
利润率：15px25px0；
边界塌陷：塌陷；
文本对齐：左对齐；
浮动：左；
}
#电话th{
字体大小：14px；
字体大小：正常；
颜色：#039；
填充：0px 1px；
边框底部：12px实心#6678b1；
}
#电话td{
边框底部：0px实心#ccc；
颜色：#669；
填充：1px 1px；
}
#电话tbody tr:hover td{
颜色：#009；
}
#滤器{
浮动：左；
}
字段集{
边缘顶部：15px；
}
字段集分区{
填充：0 5px 0；
}
.金额{
宽度：50px；
}
.active a{颜色：红色！重要；背景色：#fff！重要}
.tab{显示：无}
安扎尔·法尔泽格·米特和奥恩·比尔德
法尔泽格·奥恩·普里斯
滤器
$（文档）.ready（函数（）{
函数makeTable（数据）{
var tbl_body=“”；
$.each（数据，函数（）{
变量tbl_行=”，
currRecord=这个；
$。每个（此，函数（k，v）{
如果（k=='model'）{
v=“”；
}else if（k=='price'）{
v=“”+v+”；
}
tbl_行+=“+v+”；
})
tbl_正文+=“”+tbl_行+“”；
})
返回tbl_体；
}
函数getPhoneFilterOptions（）{
var opts=[]；
$（“输入[type=checkbox]”）。每个（函数（）{
如果（选中此项）{
opts.push（$（this.attr（“id”））；
}
});
返回选项；
}
函数更新电话（opts）{
如果（！opts | |！opts.length）{
opts=所有品牌；
}
$.ajax({
类型：“POST”，
url:“submit.php”，
数据类型：“json”，
cache:false，
数据：{filterOpts:opts}，
成功：功能（记录）{
$（'#phones tbody'）.html（makeTable（records））；
}
});
}
$（'.tabs.tab链接a'）。在（'click'，函数（e）上{
var currentAttrValue=$（this.attr（'href'）；
//警报（'.tabs'+currentAttrValue）；
//显示/隐藏选项卡
$（'.tab内容'+currentAttrValue）.show（）.hide（）；
//将当前选项卡更改/删除为活动选项卡
$（this）.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
e、 预防默认值（）；
});
$（#submitFilter”）。在（“单击”，函数（）{
var opts=getPhoneFilterOptions（）；
更新电话（opts）；
$（'.tab内容#tab1'）.show（）.sides（）.hide（）；
e、 预防默认值（）；
});
$（“#过滤”）。在（“单击”上，函数（）{
$（'.tab内容#tab2'）.show（）.sides（）.hide（）；
e、 预防默认值（）；
});
var allBrands=[]；
$("
.tab-links li { display:none;}
.tab-links li.active { display:inline;}