I have small working project here.Please check the demo here:demo I only have to make small changes in this by completely hiding the tabs. So when i run this project only 1 tab should be visible. And by clicking the image only tab2 should be visible. And while clicking the filter button on tab2 only tab1 should be visible.So basically i just want to visible only 1 tab . Any help ? Thanks. Here is my code:
我在这里有一个小工作项目。请在这里查看演示:演示我只需通过完全隐藏选项卡进行小的更改。因此,当我运行此项目时,只能看到1个选项卡。通过单击图像,tab2应该是可见的。而单击tab2上的过滤器按钮时,只有tab1应该是可见的。所以基本上我只想看到1个标签。有帮助吗?谢谢。这是我的代码:
<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>
1 个解决方案
#1
1
solved it:
.tab-links li { display:none;}
.tab-links li.active { display:inline;}
what I did is basically give the #nav li's 'display:none' and when they have class 'active' they are display:block.. then in the js just give the active class if you want to see and remove it if you want to hide... check the example
我所做的基本上是给#nav li的'display:none',当他们有类'active'时,他们显示:block ..然后在js中只是给你活动的类,如果你想看到并删除它,如果你想隐藏...检查示例
#1
1
solved it:
.tab-links li { display:none;}
.tab-links li.active { display:inline;}
what I did is basically give the #nav li's 'display:none' and when they have class 'active' they are display:block.. then in the js just give the active class if you want to see and remove it if you want to hide... check the example
我所做的基本上是给#nav li的'display:none',当他们有类'active'时,他们显示:block ..然后在js中只是给你活动的类,如果你想看到并删除它,如果你想隐藏...检查示例