在jQuery更新后激活Tabs和Accordion

时间:2014-02-19 07:20:24

标签: jquery tabs accordion

我已经更新了jQuery JS,用最新的1.10.2取代了我的1.8.2,这里是 - 我的Tabs和Accordion不再工作了。我之前在选项卡中使用了Accordion,当然必须改变一些东西才能把它带回来但是由于我对JS的了解有限,我相信除了回滚到1.8.2之外没有一个简单的方法,坦率地说我不想做。 所以我的问题是 - 如何在现有的html结构中正确更新JS以保留功能。有什么建议,至少在哪里看?感谢。

以下是我所拥有的标签中的手风琴结构:

<div id="Chapters">                             <!--Begin Tabs-->
  <ol type="1">
   <li><a href="#Ch1">Chapter 1</a></li>
   <li><a href="#Ch2">Chapter 2</a></li>
   <li><a href="#Ch3">Chapter 3</a></li>
  </ol>


  <div id="Ch4" title="Chapter 4">
<h2 class="Chapter">Chapter 4</h2>
<div class="SubChapter" id="SubCh1" title="Title chapter 4">
    <h3>Title chapter 4</h3>
    <div><p>content</p></div>

<div class="questions">                          <!--Begin Accordion -->
<div id="QBlock">                           
 <table id="QTable">
 <tr><td><div id="QNumber">4.1</div></td>
     <td><div id="QText">text of question</div></td>    <!-- Accordion panel header -->
        </tr></table></div>
<div>
    <table id="RTable">                                 <!--Accordion panel content -->
<tr><td><div id="Guidance"><p>Content</p></div></td>
    <td><div id="Response" class="Response">
  <label><input type="radio" name="Radio401" value="Y" id="Radio_401Y" onchange='radioChange(this, "401")'>Yes</label>
    <label><input type="radio" name="Radio401" value="N" id="Radio_401N" onChange='radioChange(this, "401")'>No</label>
    <label><input type="radio" name="Radio401" value="NS" id="Radio_401NS" onChange='radioChange(this, "401")'>Not Seen</label>
    <label><input type="radio" name="Radio401" value="NA" id="Radio_401NA" onChange='radioChange(this, "401")'>Not Applicable</label>
</div>
<span id="responseDetails">
  <div id="Observation">
  <label for="observation">Observation:</label>
  <textarea name="observation" id="Obs401"></textarea></div>
  <div id="DueDate">
  <label for="DueDate">Due date:<br></label>
  <input name="DueDate" type="date" id="DueDate401"/>
  </div>

  <div id="actions">
  <label for="actions">Actions required to correct and/or prevent this observation:</label>
  <textarea name="actions" id="pa401"></textarea>
  </div>
</span>
</td>
</tr>
</table>
</div>

1 个答案:

答案 0 :(得分:0)

将新的jQuery JS代码粘贴到现有文件(而不是外部js)时,请确保避免覆盖这段代码:

<script>
$(function () {

        $(".questions").accordion();
        $("#Chapters").tabs();

        // Hover states on the static widgets
        $("#dialog-link, #icons li").hover(
            function () {
                $(this).addClass("ui-state-hover");
            },
            function () {
                $(this).removeClass("ui-state-hover");
            }
        );
    });
</script>