여기에 작은 작업 프로젝트가 있습니다. 여기에서 데모를 확인하십시오 : 데모 탭을 완전히 숨겨서 약간만 변경하면됩니다. 따라서이 프로젝트를 실행할 때 하나의 탭만 표시되어야합니다. 그리고 이미지를 클릭하면 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>
해결 :
.tab-links li { display:none;}
.tab-links li.active { display:inline;}
내가 한 일은 기본적으로 #nav li의 'display : none'을 제공하고 'active'클래스가있을 때 display : block .. 다음 js에서보고 싶다면 활성 클래스를 제공하고 원하는 경우 제거합니다. 숨기려면 ... 예를 확인
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다