2013-04-11 83 views
2

在「手力量」部分的http://www.elitedeafpoker.com/dev/中,我試圖將內容(淡入和淡出)顯示在它所說的「Royal Flush」的正確區域。 「皇家同花順」背後排列着10個手部力量信息。當我點擊其中一個列表項目時,它不起作用,它什麼都不做。jQuery中的內容滑塊推子

HTML

<ul class="hand-strength" style="margin-left:15px;"> 
    <li class="selected-royalflush" id="nav-fragment-1"><a href="#fragment-1">ROYAL FLUSH</a></li> 
    <li class="selected-straightflush" id="nav-fragment-2"><a href="#fragment-2">STRAIGHT FLUSH</a></li> 
    <li class="selected-fourkind" id="nav-fragment-3"><a href="#fragment-3">FOUR OF A KIND</a></li> 
    <li class="selected-fullhouse" id="nav-fragment-4"><a href="#fragment-4">FULL HOUSE</a></li> 
    <li class="selected-flush" id="nav-fragment-5"><a href="#fragment-5">FLUSH</a></li> 
    <li class="selected-straight" id="nav-fragment-6"><a href="#fragment-6">STRAIGHT</a></li> 
    <li class="selected-threekind" id="nav-fragment-7"><a href="#fragment-7">THREE OF A KIND</a></li> 
    <li class="selected-twopair" id="nav-fragment-8"><a href="#fragment-8">TWO-PAIR</a></li> 
    <li class="selected-onepair" id="nav-fragment-9"><a href="#fragment-9">ONE-PAIR</a></li> 
    <li class="selected-highcard" id="nav-fragment-10"><a href="#fragment-10">HIGH-CARD</a></li> 
</ul> 

(信息顯示)

<div id="fragment-1" class="ui-tabs-panel"> 
    <div class="info" > 
     <h2><strong>ROYAL FLUSH</strong></h2> 
     <p>An ace high straint flush.</p> 
     <p class="cards"><img src="img/cards-royalflush.png" alt="Royal Flush" width="466" height="121" /></p> 
    </div> 
</div> 
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> 
    <div class="info" > 
     <h2><strong>STRAIGHT FLUSH</strong></h2> 
     <p>A five-card straight, all of the same suit.</p> 
     <p class="cards"><img src="img/cards-straightflush.png" alt="" /></p> 
    </div> 
</div> 
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> 
    <div class="info" > 
     <h2><strong>FOUR OF A KIND</strong></h2> 
     <p>Four cards of equal rank - also called "Quads."</p> 
     <p class="cards"><img src="img/cards-fourkind.png" alt="" /></p> 
    ........... 

jQuery的

$(document).ready(function(){ 
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
}); 
+0

,如果你想建立自己的滑塊,[這個答案可能會幫助] (http://stackoverflow.com/a/12608357/1428241) – 2013-04-11 20:36:03

回答

1

有JavaScript錯誤在控制檯:

Uncaught ReferenceError: jQuery is not defined 

這打破了網站上的JavaScript功能。您需要在 jQueryUI之前包含jQuery庫

在源中,包括目前:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="js/rotate1.js"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 

編輯:來源仍然不正確:

<script type="text/javascript" src="js/rotate1.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> 
+0

我在jQueryUI之前移動它們,它仍然不起作用。 – Christian 2013-04-11 21:12:25

+0

您的評論與我正在查看的源代碼不一致,其中包含'js/rotate1.js','1.5.3/jquery-ui.min.js','js/jquery.js','1.3.2/jquery.min.js'(見編輯答案)。更糟的是,你現在有2個版本的jQuery。這將**不**的工作。您需要決定使用哪個版本的jQuery,並在任何其他jQuery依賴插件之前包含_first_。 – andyb 2013-04-11 21:31:58

+0

好吧,我刪除了舊的jQuery,它仍然不起作用。你剛剛發佈了一個編輯答案?哪裏?或者是我感到困惑。 – Christian 2013-04-12 00:54:59