0
替代CSS僅onclick functioni.html替代CSS僅onclick功能
當您單擊任何選項卡時，它會直接跳到選項卡菜單的開始處。我無法使用javascript或jquery，因此無法使用onclick =「false」。有沒有一種CSS方法來防止這種情況發生。
A
回答
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" />元素，用戶正在使用<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">成爲所有選項卡的頁腳，而不是每個選項卡。這是因爲您的標記使用了Facebook，Twitter，Skype，網絡和收藏夾圖像的id屬性。 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>
UPDATE
這裏有一個方法一個工作的水平標籤條（也在有效的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>
+0
嗨，太好了。我試圖將自己轉換爲單選按鈕，但不成功。我如何將標籤沿着藍色背景放在頂部，然後點擊時會顯示像我的原始內容？ –
+0
@LauraHill：更新了答案。 – pete
-1
使用null內嵌javascript事件。
<a href="javascript://" ... />
+0
我不明白？ –
+0
EEEm ...你不明白什麼？不要鏈接＃無論鏈接到javascript：//。我會在建立一個巨大的解決方案之前嘗試這種方式...也許ebay會接受這個... –
-2
添加空目標的哈希的位置（一個或多個）的href =「＃項目-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
這是否有意義？
P.S.您的網頁缺少通常體和頭標籤這是通常的html頁面結構的一部分......，截止/HTML標籤是:)
+0
並錯過了'
它跳轉到錨，因爲它們的href屬性被指向他們。你必須修改HTML。 – jbabey
爲什麼你不能使用JavaScript？ – Ian
它是在易趣和易趣不允許JavaScript，iframes或jquery –