替代 CSS only onclick functioni.html
当您单击任何选项卡时，它会直接将您带到选项卡菜单的开头。我不能使用 javascript 或 jquery，所以不能使用 onclick="false"。有没有一种 CSS 方法可以防止这种情况发生。
问问题
637 次
3 回答
0
您遇到的问题源于您使用 CSS:target选择器（需要#item-1在 URL 中使用）。设置href="#item-1"允许:target选择器以输入 URL 为代价来运行#item-1，这就是导致页面跳转的原因。href这是一个恶毒的 catch-22，使用属性无法绕过它。
我知道如何仅使用 CSS 复制选项卡功能的唯一方法是使用“复选框黑客”的变体（用单选按钮代替复选框）。
本质上，使用<label>Tab</label><input type="radio" />您当前使用的元素集，<a href="">Tab</a>然后设置 CSS 样式规则以根据checked单选按钮的属性控制选项卡内容 div 的可见性。
特定于您的代码：
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position radio on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
.noint11_menu > li > div {
display: none;
}
/* Toggled State */
input[type=radio]:checked ~ div {
display: block;
}
当您的标记为：
<li id="item-1">
<label for="toggle-Shipping">Shipping</label>
<input type="radio" id="toggle-Shipping" name="toggleTabs" checked="checked">
<div>
<p>Tab Content: Shipping</p>
</div>
</li>
<li id="item-2">
<label for="toggle-Payment">Payment</label>
<input type="radio" id="toggle-Payment" name="toggleTabs">
<div>
<p>Tab Content: Payment</p>
</div>
</li>
<li id="item-3">
<label for="toggle-Returns">Returns</label>
<input type="radio" id="toggle-Returns" name="toggleTabs">
<div id="notice">
<p>Tab Content: Returns</p>
</div>
</li>
<li id="item-4">
<label for="toggle-Tab4">Tab4</label>
<input type="radio" id="toggle-Tab4" name="toggleTabs">
<div>
<p>Tab Content: Tab4</p>
</div>
</li>
这是一个演示它的小提琴：http: //jsfiddle.net/ezhDQ/
请注意在小提琴中，我设置<div class="footer">为所有选项卡的页脚，而不是每个选项卡。这是因为您的标记使用idFacebook、Twitter、Skype、web 和收藏图像的属性。属性的目的id是识别页面上的一个特定元素（意味着id每个元素的属性必须是唯一的）。
如果您希望每个选项卡都有自己的页脚，请更改您的标记以改用该name属性。
此外，下面是您的页面，其中包含完全有效的 XHTML 过渡标记（从长远来看，这将有助于跨浏览器的一致性）：
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width;" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/parts.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/ebaysite/handheld.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/ebaysite/font.css" />
<style type="text/css">
.noint11_menu > li {
list-style-type: none;
}
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position radio on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
.noint11_menu > li > div {
display: none;
}
/* Toggled State */
input[type=radio]:checked ~ div {
display: block;
}
</style>
</head>
<body>
<div id="full">
<div id="header100">
<img id="header" alt="Our Logo" src="http://www.ubreakirepair.com/ebaysite/images/ubreakirepairheader.png" />
</div>
<div id="noint_box1">
<table border="0" width="958">
<tbody>
<tr>
<td width="948" height="27" valign="top" class="content4">
<div id="tab2" class="css-tabs">
<ul class="noint11_menu">
<li id="item-1">
<label for="toggle-Shipping">Shipping</label>
<input type="radio" id="toggle-Shipping" name="toggleTabs" checked="checked" />
<div>
<p><img id="shippingtable" alt="Shipping Table" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png" width="684px" height="242px" /></p>
<div class="footer">
<img alt="next section" src="http://www.ubreakirepair.com/ebaysite/images/line.png" width="976" height="9" />
<p>
<a class="header3" href="http://contact.ebay.co.uk/ws/eBayISAPI.dll?ContactUserNextGen&recipient=irepair">Please click here if you wish to contact us about this product</a>
</p>
<p class="header3">or</p>
<p class="header3">use one of the links below</p>
<a href="http://www.facebook.com/ubreakirepair">
<img name="facebook" alt="Visit us on Facebook" src="http://www.ubreakirepair.com/ebaysite/images/facebook.png" />
</a>
<a href="https://twitter.com/ubreak_irepair">
<img name="twitter" alt="Visit us at Twitter" src="http://www.ubreakirepair.com/ebaysite/images/Twitter.png" />
</a>
<a href="skype:ubreakirepair?chat">
<img name="skype" alt="Open Skype" src="http://www.ubreakirepair.com/ebaysite/images/skype.png" />
</a>
<a href="http://www.ubreakirepair.com/contactus.php">
<img name="web" alt="Contact Us" src="http://www.ubreakirepair.com/ebaysite/images/website.png" style="text-align:center" />
</a>
<p>
<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=irepair">
<img name="fav" alt="Favorite Us at Ebay" src="http://www.ubreakirepair.com/ebaysite/images/fav.png" />
</a>
</p>
</div>
</div>
</li>
<li id="item-2">
<label for="toggle-Payment">Payment</label>
<input type="radio" id="toggle-Payment" name="toggleTabs" />
<div>
<p>Tab Content 2</p>
<div class="footer">
<img alt="next section" src="http://www.ubreakirepair.com/ebaysite/images/line.png" width="976" height="9" />
<p>
<a class="header3" href="http://contact.ebay.co.uk/ws/eBayISAPI.dll?ContactUserNextGen&recipient=irepair">Please click here if you wish to contact us about this product</a>
</p>
<p class="header3">or</p>
<p class="header3">use one of the links below</p>
<a href="http://www.facebook.com/ubreakirepair">
<img name="facebook" alt="Visit us on Facebook" src="http://www.ubreakirepair.com/ebaysite/images/facebook.png" />
</a>
<a href="https://twitter.com/ubreak_irepair">
<img name="twitter" alt="Visit us at Twitter" src="http://www.ubreakirepair.com/ebaysite/images/Twitter.png" />
</a>
<a href="skype:ubreakirepair?chat">
<img name="skype" alt="Open Skype" src="http://www.ubreakirepair.com/ebaysite/images/skype.png" />
</a>
<a href="http://www.ubreakirepair.com/contactus.php">
<img name="web" alt="Contact Us" src="http://www.ubreakirepair.com/ebaysite/images/website.png" style="text-align:center" />
</a>
<p>
<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=irepair">
<img name="fav" alt="Favorite Us at Ebay" src="http://www.ubreakirepair.com/ebaysite/images/fav.png" />
</a>
</p>
</div>
</div>
</li>
<li id="item-3">
<label for="toggle-Returns">Returns</label>
<input type="radio" id="toggle-Returns" name="toggleTabs" />
<div id="notice">
<p>At uBreakiRepair customer satisfaction is paramount. If any item received,
deemed to be faulty or damaged, it will be replaced or refunded. All repairs
require specialised skill and we do not hold any responsibility for the
damage incured in the course of repairing your device. We offer an installation
service if you are not confident in the repair yourself.</p>
<div class="footer">
<img alt="next section" src="http://www.ubreakirepair.com/ebaysite/images/line.png" width="976" height="9" />
<p>
<a class="header3" href="http://contact.ebay.co.uk/ws/eBayISAPI.dll?ContactUserNextGen&recipient=irepair">Please click here if you wish to contact us about this product</a>
</p>
<p class="header3">or</p>
<p class="header3">use one of the links below</p>
<a href="http://www.facebook.com/ubreakirepair">
<img name="facebook" alt="Visit us on Facebook" src="http://www.ubreakirepair.com/ebaysite/images/facebook.png" />
</a>
<a href="https://twitter.com/ubreak_irepair">
<img name="twitter" alt="Visit us at Twitter" src="http://www.ubreakirepair.com/ebaysite/images/Twitter.png" />
</a>
<a href="skype:ubreakirepair?chat">
<img name="skype" alt="Open Skype" src="http://www.ubreakirepair.com/ebaysite/images/skype.png" />
</a>
<a href="http://www.ubreakirepair.com/contactus.php">
<img name="web" alt="Contact Us" src="http://www.ubreakirepair.com/ebaysite/images/website.png" style="text-align:center" />
</a>
<p>
<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=irepair">
<img name="fav" alt="Favorite Us at Ebay" src="http://www.ubreakirepair.com/ebaysite/images/fav.png" />
</a>
</p>
</div>
</div>
</li>
<li id="item-4" title="click for Tab 4">
<label for="toggle-Tab4">Tab4</label>
<input type="radio" id="toggle-Tab4" name="toggleTabs" />
<div>
<p>Tab Content 4</p>
<div class="footer">
<img alt="next section" src="http://www.ubreakirepair.com/ebaysite/images/line.png" width="976" height="9" />
<p>
<a class="header3" href="http://contact.ebay.co.uk/ws/eBayISAPI.dll?ContactUserNextGen&recipient=irepair">Please click here if you wish to contact us about this product</a>
</p>
<p class="header3">or</p>
<p class="header3">use one of the links below</p>
<a href="http://www.facebook.com/ubreakirepair">
<img name="facebook" alt="Visit us on Facebook" src="http://www.ubreakirepair.com/ebaysite/images/facebook.png" />
</a>
<a href="https://twitter.com/ubreak_irepair">
<img name="twitter" alt="Visit us at Twitter" src="http://www.ubreakirepair.com/ebaysite/images/Twitter.png" />
</a>
<a href="skype:ubreakirepair?chat">
<img name="skype" alt="Open Skype" src="http://www.ubreakirepair.com/ebaysite/images/skype.png" />
</a>
<a href="http://www.ubreakirepair.com/contactus.php">
<img name="web" alt="Contact Us" src="http://www.ubreakirepair.com/ebaysite/images/website.png" style="text-align:center" />
</a>
<p>
<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=irepair">
<img name="fav" alt="Favorite Us at Ebay" src="http://www.ubreakirepair.com/ebaysite/images/fav.png" />
</a>
</p>
</div>
</div>
</li>
</ul>
<p> </p>
</div>
</td>
</tr>
<tr>
<td valign="top" class="estimate">
<p> </p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
更新
这是拥有一个有效的水平标签条的一种方法（也在有效的 XHTML 中）：
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width;" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/parts.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/ebaysite/handheld.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="http://www.ubreakirepair.com/ebaysite/font.css" />
<style type="text/css">
li.noint11_menu {
list-style-type: none;
width: 10em;
}
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position radio on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
li.noint11_menu > div {
display: none;
}
/* Toggled State */
input[type=radio]:checked ~ div {
color: #EEE;
display: block;
margin-top: 13px;
margin-bottom: 5px;
position: absolute;
left: 0;
width: 700px;
text-shadow: 1px 1px 1px black;
font-family: 'MuliLight', Arial, sans-serif;
font-size: 14px;
text-decoration: none;
text-align: center;
padding: 5px 10px;
background: #0272A7;
box-shadow: inset 0px 0px 1px #EDF9FF;
-moz-user-select: none;
-moz-box-shadow: inset 0px 0px 1px #edf9ff;
-webkit-box-shadow: inset 0px 0px 1px #EDF9FF;
}
div.css-tabs ul {
width: 100%;
height: 40px;
position: absolute;
}
div.css-tabs ul li {
float: left;
}
div.css-tabs {
float: left;
}
div.footer {
clear: both;
position: fixed;
bottom: 0;
width: 100%;
}
div.footer div {
margin: 0 auto;
}
</style>
</head>
<body>
<div id="full">
<div id="header100">
<img id="header" alt="Our Logo" src="http://www.ubreakirepair.com/ebaysite/images/ubreakirepairheader.png" />
</div>
<div id="noint_box1">
<div id="tab2" class="css-tabs">
<ul>
<li id="item-1" class="noint11_menu">
<label for="toggle-Shipping">Shipping</label>
<input type="radio" id="toggle-Shipping" name="toggleTabs" checked="checked" />
<div>
<p><img id="shippingtable" alt="Shipping Table" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png" width="684px" height="242px" /></p>
</div>
</li>
<li id="item-2" class="noint11_menu">
<label for="toggle-Payment">Payment</label>
<input type="radio" id="toggle-Payment" name="toggleTabs" />
<div>
<p>Tab Content 2</p>
</div>
</li>
<li id="item-3" class="noint11_menu">
<label for="toggle-Returns">Returns</label>
<input type="radio" id="toggle-Returns" name="toggleTabs" />
<div id="notice">
<p>At uBreakiRepair customer satisfaction is paramount. If any item received,
deemed to be faulty or damaged, it will be replaced or refunded. All repairs
require specialised skill and we do not hold any responsibility for the
damage incured in the course of repairing your device. We offer an installation
service if you are not confident in the repair yourself.</p>
</div>
</li>
<li id="item-4" class="noint11_menu" title="click for Tab 4">
<label for="toggle-Tab4">Tab4</label>
<input type="radio" id="toggle-Tab4" name="toggleTabs" />
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
<p> </p>
<div class="estimate">
<p> </p>
</div>
</div>
<div class="footer">
<div>
<img alt="next section" src="http://www.ubreakirepair.com/ebaysite/images/line.png" width="976" height="9" />
<p>
<a class="header3" href="http://contact.ebay.co.uk/ws/eBayISAPI.dll?ContactUserNextGen&recipient=irepair">Please click here if you wish to contact us about this product</a>
</p>
<p class="header3">or</p>
<p class="header3">use one of the links below</p>
<a href="http://www.facebook.com/ubreakirepair">
<img name="facebook" alt="Visit us on Facebook" src="http://www.ubreakirepair.com/ebaysite/images/facebook.png" width="48" />
</a>
<a href="https://twitter.com/ubreak_irepair">
<img name="twitter" alt="Visit us at Twitter" src="http://www.ubreakirepair.com/ebaysite/images/Twitter.png" width="48" />
</a>
<a href="skype:ubreakirepair?chat">
<img name="skype" alt="Open Skype" src="http://www.ubreakirepair.com/ebaysite/images/skype.png" width="48" />
</a>
<a href="http://www.ubreakirepair.com/contactus.php">
<img name="web" alt="Contact Us" src="http://www.ubreakirepair.com/ebaysite/images/website.png" width="48" />
</a>
<p>
<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&mode=0&preference=0&sellerid=irepair">
<img name="fav" alt="Favorite Us at Ebay" src="http://www.ubreakirepair.com/ebaysite/images/fav.png" height="48" />
</a>
</p>
</div>
</div>
</div>
</body>
</html>
于 2012-10-21T15:44:58.300 回答
-1
使用 null 内联 javascript 事件。
<a href="javascript://" ... />
于 2012-10-19T17:20:32.957 回答
-2
为您的哈希位置添加空白目标 href="#item-1"：
<a name="item-1"></a>
如果您将此添加到页面顶部，则当用户单击第一个选项卡时，它将转到此空白目标锚标记所在的位置。
对以下内容执行相同操作：
<a name="item-2"></a>
<a name="item-3"></a>
<a name="item-4"></a>
....
我不确定您可以访问页面的哪个部分，但尝试在完整的 div 标签之前添加它们并查看效果：
<a name="item-1"></a>
<a name="item-2"></a>
<a name="item-3"></a>
<a name="item-4"></a>
<div id="full">
如果这些额外的标签在您的页面上占用了不需要的物理空间，请使用 CSS 隐藏它们display: none
这有意义吗？
PS您的页面缺少通常的正文和头部标签，它们是通常的html页面结构的一部分......以及结束/html标签是的:)
于 2012-10-19T17:33:44.607 回答