使用JQuery工具工具提示與UI標籤

我正在嘗試在我爲腳本類構建的站點中使用JQuery工具工具提示插件。問題是我在網站中使用JQuery UI標籤進行導航，顯然這兩個庫不能很好地協同工作。當我在索引頁面之外加載站點（帶有標籤的站點）時，工具提示插件工作正常，只有當我從工具提示停止工作的標籤加載頁面時。這是我的索引頁的設置方式：使用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標籤的地方是我輸入腳本和樣式，它應該放在我的索引頁面還是每個頁面上？

來源

2011-10-07 KylePlusPlus

問題是，jQuery UI和jQuery工具共享相同的標籤庫。這引起了衝突。如果你只下載沒有選項卡的jquery工具，它應該可以解決這個問題。

來源

2011-11-27 21:35:52

使用JQuery工具工具提示與UI標籤

回答

相關問題