Question

我需要使用不需要<head>版本的标签的JavaScript（它不可用）。

我有三个链接和三个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

可能我需要添加div名称或ID，并且具有显示或隐藏div的简单功能（将在链接点击时执行），但我找不到不需要<head>的div编辑。

Answer 1

正如Quentin所说，在评论您的问题时，几乎任何提供标签窗口小部件（或任何其他构建标签的解决方案）的JavaScript库都不需要在页面的<head>部分执行任何操作。嗯......实际上它确实如此，因为你在那里调用外部JavaScript文件：

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

但这只是保持代码清洁的一种形式。如果你不喜欢头部那么多，你可以在<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>这样的内容：< / p>

<head></head>

然后，jQuery UI作者再次向您展示，您应该将调用最新版本的 jQuery 和 jQuery UI 库添加到<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> ...宣布你的标签之前：

{{1}}

那就是全部，伙计们！：

用于制作不需要版本的标签的JavaScript？

1 个答案: