使用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标签

回答

相关问题