Question

我正在尝试在我正在为脚本类构建的站点中使用JQuery工具工具提示插件。问题是我在网站中使用JQuery UI选项卡进行导航，显然这两个库并不能很好地协同工作。当我在索引页面（具有选项卡的站点）之外加载站点时，工具提示插件工作正常，只有当我从选项卡加载页面时工具提示停止工作。这就是我的索引页面的设置方式：

<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>

<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />


<script>
$(document).ready(function() {
    $('#tabs').tabs();
});
</script>
</head>

<body>

<div class="container">

    <div id="tabs">
    <ul id="info-nav">
          <li><a href="home.html" title="home">Home</a></li>
          <li><a href="product.html" title="products">Products</a></li>
          <li><a href="UIDesign.html" title="Order">Order</a></li>
          <li><a href="photos.html" title="FAQ">FAQ</a></li>
          <li><a href="feedback.html" title="About">About</a></li>
    </ul>

  <!-- end .container --></div>

  </div>
</body>
</html>

我有工具提示的页面在这里：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/mainScript.js" type="text/javascript"></script>
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
<h1 class="pageTitle">Products</h1>
</div>

<div id="sidebar">
<h2 class="subTitle">Sign up</h2>
<form>
<label  for="fName">First Name:</label><br />
        <input type="text" class="textbox" name="fName" width="5px"><br />

        <label  for="lName">Last Name:</label><br />
        <input type="text" name="lName"><br />

        <label  for="email">e-mail:</label><br />
        <input type="text" class="textbox" name="email"><br />

        <label  for="uName">Username:</label><br />
        <input type="text" class="textbox" name="uName"><br />

        <label  for="password">Password:</label><br />
        <input type="password"class="textbox" name="password"><br />

        <label for="age">Age:</label>
        <select name="age">
                <option>Select Age Group:</option>
                <option>16-20</option>
                <option>21-25</option>
                <option>26-30</option>
                <option>31-35</option>
                <option>36-40</option>
                <option>41-50</option>
                <option>51-60</option>
                <option>61-70</option>
                <option>71+</option>
        </select><br />

        <label for="gender">Gender:</label><br />
        <input type="radio" name="gender" value="Male">Male<br />
        <input type="radio" name="gender" value="Female">Female<br />

        <input type="Submit" value="Submit">
        <input type="reset">
</form>
</div>

<div class="content" id="bladeContent">
<h2 class="subTitle">GTX 590</h2> 
<p class="productContent">
<img src="images/GTX590/GTX590-0.jpg" class="productThumb" alt="GTX 590">
<div class="tooltip">
    <div class="photoGallery">
    <img src="images/GTX590/GTX590-1.jpg">
    <img src="images/GTX590/GTX590-2.jpg">
    <img src="images/GTX590/GTX590-3.jpg">
    <img src="images/GTX590/GTX590-4.jpg">
    </div>

    <table class="tooltipTable">
    <tr>
        <td>GPU: </td>
        <td>GeForce GTX 590 (Fermi)</td>
    </tr>

    <tr>
        <td>Core Clock: </td>
        <td>612Mhz</td>
    </tr>

    <tr>
        <td>Stream Processors: </td>
        <td>1024 (512x2) Processor Cores</td>
    </tr>

    <tr>
        <td>Effective Memory Clock: </td>
        <td>3420Mhz</td>
    </tr>

    <tr>
        <td>Memory Size: </td>
        <td>3072MB</td>
    </tr>

    <tr>
        <td>Memory Interface: </td>
        <td>768-bit</td>
    </tr>

    <tr>
        <td>Memory Type: </td>
        <td>GDDR5</td>
    </tr>
    </table>
</div>
 With 1024 CUDA cores, 
6 billion transistors, 3GB of GDDR5 memory, and over 2200 individual components
all packed into an 11 inch dual slot PCB, GTX 590 is nothing short of an 
engineering marvel.  Designed to deliver not only the world’s fastest DirectX 11 
performance, but also the world’s quietest acoustics for a dual chip graphics card,
the GTX 590 offers 50% faster performance than GTX 580 while nearly matching its 
little brother’s award winning acoustics.
</p>

</div>

很抱歉代码的数量，我试图将它减少到我认为问题所在的地方，但事实证明这是一个相当大的挑战。关于UI标签我真的不明白的地方是导入脚本和样式的地方，它应该在我的索引页面还是每个页面上？

Answer 1

问题是jquery ui和jquery工具共享相同的选项卡库。这引发了一场冲突。如果你只下载没有标签的jquery工具，它应该可以解决这个问题。

使用带有UI选项卡的JQuery工具工具提示

1 个答案: