-3

<head>編集を必要としないタブには JavaScript が必要です(それは不可能です)。

私は 3 つのリンクと 3 つの div を持っています。リンク プッシュでは 1 つの div が表示され、他のリンク プッシュでは非表示になり、他のリンク プッシュでは他の div が表示され、他のすべての div が非表示になるようなものが必要です。

これが私のコードです：

<div style="text-align: left;">
            <ul style="margin: 0 0 0 0;">
                <li style="display:inline; margin-left: 3px; text-align: center; width:90px; background-color:#58794c; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;"><a style="color: #ffffff; font-size: 28px; text-decoration: none;" href="#">Postage</a></li>
                <li style="display:inline; margin-left: 3px; text-align: center; width:90px; background-color:#558b40; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;"><a style="color: #efda5d; font-size: 28px; text-decoration: none;" href="#">Return</a></li>
                <li style="display:inline; margin-left: 3px; text-align: center; width:90px; background-color:#66ac4a; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;"><a style="color: #efda5d; font-size: 28px; text-decoration: none;" href="#">Payment</a></li>
            </ul>
        </div>
        <div style="width:324px; background-color:#58794c; color: #efda5d; border-bottom:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Shipping information"><p style="text-align: left; margin-left: 10; margin-top:0;">Available shipping type/It's price/Additional cost for this product:<br />[[ShippingService1]]/[[ShippingServiceCost1]]/[[ShippingServiceAdditionalCost1]]<br />[[ShippingService2]]/[[ShippingServiceCost2]]/[[ShippingServiceAdditionalCost2]]<br />[[ShippingService3]]/[[ShippingServiceCost3]]/[[ShippingServiceAdditionalCost3]]<br />More information about products delivery you will find by clicking <a style="color: #ffffff;" href="http://stores.ebay.co.uk/Digi-Spot/Delivery.html">here</a>.</p></div>
        <div style="width:324px; background-color:#558b40; color: #efda5d; border-bottom:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Return information"><p style="text-align: left; margin-left: 10; margin-top:0;">Product must be returned within [[ReturnWithin]] to this adress <b>[[ReturnAddress]]</b>. For return shipping pays <b>[[ReturnShipPaid]]</b>.<br /> More information about returning products you will find by clicking <a style="color: #ffffff;" href="http://stores.ebay.co.uk/Digi-Spot/Returns.html">here</a>.</p></div>
        <div style="width:324px; background-color:#66ac4a; color: #efda5d; border-bottom:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Payment information"><p style="text-align: left; margin-left: 10; margin-top:0;">Product price is <b>[[FixedPrice]]</b><br />Additional payment instructions for this product: [[PaymentInstructions]]</p></div>

そして、ここに私が欲しいものの例があります: http://www.isdntek.com/tagbot/tabtop.htm

<head>おそらく、div 名または ID を追加し、div を表示または非表示にする簡単な機能 (リンク クリックで実行される) が必要ですが、編集を必要としないものを見つけることができません。

4

1 に答える 1

0

<head>クエンティンがあなたの質問へのコメントで言ったように、事実上、タブ ウィジェット (またはタブを構築するためのその他のソリューション) を提供するすべての JavaScript ライブラリは、ページのセクションで何もする必要はありません。ええと...実際には、そこに外部 JavaScript ファイルへの呼び出しを配置すると、次のようになります。

<script type="text/javascript" src="libs.js"></script>

しかし、それはコードをきれいに保つための単なる形式です。head があまり気に入らない場合は、同じ行を<body></body>セクション内のほぼどこにでも配置でき、同様に機能するはずです。

したがって、おそらくタブを提供するすべての JavaScript ライブラリが を変更しなくても機能する<head>場合は、世界で最も (またはほとんど) 有名なjQuery UIを使用しましょう。

与えられた例 (「ソースを表示」をクリック) でわかるように、タブを取得するために必要なことは、次の<body></body>ようなものを配置することだけです。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1 Title</a></li>
        <li><a href="#tabs-2">Tab 2 Title</a></li>
        <li><a href="#tabs-3">Tab 3 Title</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 Text</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 Text</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3 Text</p>
    </div>
</div>

また、jQuery UI の作成者は、最新バージョンのjQueryおよびjQuery UIライブラリへの呼び出しを<head></head>セクションに入れる必要があることを示しています。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div>しかし、私が書いたように、たとえば、タブを宣言するために使用する直前など、これをどこにでも置くことができます。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
    <ul>
    ...

皆さん、それだけです！:]

于 2013-01-11T11:22:09.737 に答える