我正在设计一个 CSS 选项卡设计页面，它是这样的:
这是它的代码(test2.php):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/ajaxtabs.css" />
<script type="text/javascript" src="js/ajaxtabs.js">
</script>
</head>
<body>
<?php
$page = isset($_GET['test2']) ? $_GET['test2'] : "" ;
?>
<ul id="countrytabs" class="shadetabs" style="clear:both">
<!--<li><a href="#" rel="#default" class="selected">Tab 1</a></li>-->
<li><a href="admin/add-client.php" rel="countrycontainer">Client</a></li>
<li><a href="admin/add-vendor.php" rel="countrycontainer">Vendor</a></li>
<!--<li><a href="admin/add-client.php" rel="#iframe">Tab 4</a></li>-->
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:100%; height:100%; margin-bottom: 1em; padding: 10px; clear:both;">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<hr />
</body>
</html>
但是一旦我将此代码放入 <div> 中在另一个调用它的代码中，它显示了不必要的空间。
这是我的代码 (index.php):
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ISYS</title>
<link href="../css/main-style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/addfunction.js"></script>
<script src="../js/editfunction.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
</script>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
</script>
</head>
<body>
<?php
require("../dbconnect.php");
$page = isset($_GET['page']) ? $_GET['page'] : "test2" ;
?>
<div class="container">
<div class="header"><img src="../images/CTILOGO.jpg" width="20%" height="90" style="background-color: #8090AB; display:inline;" />
<a href="../logout.php"><img src="../images/logout.png" class="headermenu" style=" display:inline;" /></a>
<a href="#home"><img src="../images/home.png" class="headermenu" style=" display:inline;" /></a>
<a href="javascript:changePassword()" title="Change Password"><img src="../images/user.png" class="headermenu" style=" display:inline;" /></a>
<!-- end .header --></div>
<div class="sidebar1" id="link_ul">
<ul class="nav">
<li><a href="index.php?page=client">Client</a></li>
<li><a href="index.php?page=vendor">Vendor</a></li>
<li><a href="index.php?page=product">Product</a></li>
<li><a href="index.php?page=user">Users</a></li>
<li><a href="index.php?page=test2">test</a></li>
</ul>
<script>
/*for active link*/
(function(){
$('#link_ul a').bind('click', function(e){
var me=$(this);
var as = $('#link').find('a');
as.removeClass('current');
me.addClass('current');
});
}());
</script>
<!-- end .sidebar1 --></div>
<div class="content">
<?php
include(''.$page.'.php');
?>
<!-- end .content --></div>
<div class="footer">
<p></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
我想要 index.php看起来像 test2.php 中的选项卡.我没有更改 CSS 部分中的任何内容，除了显示之外一切正常。我不确定代码哪里错了。我将不胜感激任何帮助。
最佳答案
重置 CSS。也许浏览器添加了一些不需要的填充或边距。把这段代码放在你的 css 的顶部
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
关于php - 显示不必要空格的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24795420/