CSS のみの代替 onclick functioni.html
いずれかのタブをクリックすると、タブ メニューの最初に直接移動します。JavaScript や jquery を使用できないため、onclick="false" を使用できません。これが起こらないようにする CSS の方法はありますか。
3 に答える
0
あなたが抱えている問題は、CSS:targetセレクターの使用に起因します ( #item-1URL が機能する必要があります)。この設定href="#item-1"により、:targetセレクター#item-1は URL を挿入するという代償を払って機能できるようになり、ページがジャンプする原因になります。これは悪質なキャッチ 22 であり、href属性を使用して回避する方法はありません。
CSS のみを使用してタブ機能を複製する方法を私が知っている唯一の方法は、「チェックボックス ハック」のバリエーションを使用することです(チェックボックスの代わりにラジオ ボタンを使用します)。
本質的には、<label>Tab</label><input type="radio" />現在使用している要素セットを使用してから、CSS スタイル ルールを設定して、ラジオ ボタン<a href="">Tab</a>のプロパティに基づいてタブ コンテンツ 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;
}
マークアップが次の場合に機能します。
<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、ページ上の 1 つの特定の要素を識別することです (つまり、id要素を持つ各要素の属性は一意でなければなりません)。
各タブに独自のフッターを持たせたい場合は、name代わりに属性を使用するようにマークアップを変更してください。
また、以下は完全に有効な XHTML Transitional マークアップを含むページです (長期的にはクロスブラウザーの一貫性に役立ちます)。
<!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 つの方法を次に示します (これも有効な 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">
これらの余分なタグがページ上の望ましくない物理的スペースを占める場合は、display: noneを使用して CSS で非表示にします
これは理にかなっていますか？
PSあなたのページには、通常のhtmlページ構造の一部である通常のbodyタグとheadタグがありません...そして、終了/htmlタグはい:)
于 2012-10-19T17:33:44.607 に答える