仅替代CSS onclick functioni.html
当您单击任何选项卡时，它将直接启动到选项卡菜单的开头。我不能使用javascript或jquery所以不能使用onclick =“false”。是否有CSS方法来防止这种情况发生。
答案 0 :(得分：0)
您遇到的问题源于您使用CSS :target选择器（需要URL中的#item-1才能运行）。设置href="#item-1"允许:target选择器以将#item-1放入URL中为代价来运行，这是导致页面跳转的原因。这是一个恶毒的捕获22，使用href属性无法绕过它。
我知道如何仅使用CSS复制标签功能的唯一方法是使用"the checkbox hack"的变体（用复选框代替复选框）。
本质上，使用当前使用<label>Tab</label><input type="radio" />的{{1}}元素集，然后设置CSS样式规则以根据<a href="">Tab</a>属性控制tab-content div的可见性。单选按钮。
特定于您的代码：
checked将起作用
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;
}
这是一个演示它的小提琴：http://jsfiddle.net/ezhDQ/
请注意，在小提琴中，我将<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>
设置为所有标签的页脚，而不是每个标签。这是因为您的标记使用Facebook，Twitter，Skype，Web和Favorite图像的<div class="footer">属性。 id属性的目的是识别页面上的一个特定元素（意味着每个元素的id属性必须是唯一的。）
如果您希望每个标签都有自己的页脚，请更改标记以改为使用id属性。
此外，下面是您的页面，其中包含完全有效的XHTML Transitional标记（从长远来看，这将有助于跨浏览器的一致性）：
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>
答案 1 :(得分：-1)
使用null内联javascript事件。
<a href="javascript://" ... />
答案 2 :(得分：-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">
如果这些额外的代码占用了您网页上不需要的物理空间，请使用 display：none
将其隐藏起来这有意义吗？
P.S。您的页面缺少通常的正文和 head 标记，这些标记是通常的html网页结构的一部分...并且结束 / html 标记是： ）