Javascript 将JQuery工具提示与UI选项卡一起使用_Javascript_Jquery_Jquery Ui_Jquery Plugins

Javascript 将JQuery工具提示与UI选项卡一起使用

javascript jquery jquery-ui jquery-plugins

Javascript 将JQuery工具提示与UI选项卡一起使用,javascript,jquery,jquery-ui,jquery-plugins,Javascript,Jquery,Jquery Ui,Jquery Plugins,我试图在为脚本类构建的站点中使用JQuery工具提示插件。问题是我在站点中使用jQueryUI选项卡进行导航，显然这两个库不能很好地协同工作。当我加载索引页面之外的站点（包含选项卡的站点）时，工具提示插件工作正常，只有当我从选项卡加载页面时，工具提示才会停止工作。以下是我的索引页的设置方式： <html> <head> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/

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

<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>


$（文档）.ready（函数（）{
$（“#tabs”）.tabs（）；
});

我的工具提示页面如下：

<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>


产品
注册
名字：



姓氏：



电子邮件：



用户名：



密码：



年龄：
选择年龄组：
16-20
21-25
26-30
31-35
36-40
41-50
51-60
61-70
71+


性别：

男性

女性

GTX 590

GPU：
GeForce GTX 590（费米）
核心时钟：
612Mhz
流处理器：
1024（512x2）个处理器核
有效存储器时钟：
3420Mhz
内存大小：
3072MB
内存接口：
768位
内存类型：
GDDR5
拥有1024个CUDA内核，
60亿晶体管、3GB GDDR5内存和2200多个独立组件
GTX 590全部封装在一个11英寸双槽PCB中，完全是一个
工程奇迹。旨在提供世界上最快的DirectX 11
性能，而且是双芯片图形卡的世界上最安静的音响，
GTX 590提供比GTX 580快50%的性能，同时几乎匹配其
小弟弟的获奖音响。

很抱歉，代码太多了，我试图将其减少到我认为问题所在的位置，但事实证明这是一个相当大的挑战。关于UI选项卡，我真正不了解的是我在哪里导入脚本和样式，它应该在我的索引页面上还是在每个页面上？

问题是jquery UI和jquery工具共享同一个选项卡库。这会导致冲突。如果只下载jquery工具而不下载选项卡，那么应该可以解决这个问题