javascript中的“标签”部分在codeigniter框架php

问题描述

我在javascript和HTML中有一个选项卡部分，该部分在我的本地主机上运行良好，现在我在codeigniter框架上实现了它，并上传到了我的服务器上，实时URL为：

[在此输入链接描述] [1]

代码如下：

$(".tabz_content").hide();
$(".tabz_content:first").hide();

//tab mode

$("ul.tabz li").click(function () {

    $(".tabz_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();
    $("ul.tabz li").removeClass("activeking");
    $(this).addClass("activeking");

    $(".tabz-accordion_heading").removeClass("d_active");
    $(".tabz-accordion_heading[rel^='" + activeTab + "']").addClass("d_active");

});


/* acoordion mode */

$(".tabz-accordion_heading").click(function () {

    $(".tabz_content").hide();
    var d_activeTab = $(this).attr("rel");
    $("#" + d_activeTab).fadeIn();

    $(".tabz-accordion_heading").removeClass("d_active");
    $(this).addClass("d_active");

    $("ul.tabz li").removeClass("activeking");
    $("ul.tabz li[rel^='" + d_activeTab + "']").addClass("activeking");
});

<link rel="stylesheet" type="text/css" href="https://booktheparty.in/zubi/style.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<section class="industrys">


  <ul class="tabz">
    <li class="SC" rel="tabz1">
      <h2>Our Mission</h2>
      <br />
      <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod </p>
      <Br />
      <p class="learnMoreSC">Learn More</p>
    </li>
    <li class="VM" rel="tabz2">
      <h2>Our Vision</h2>
      <br />
      <p>Lorem ipsum dolor sit amet,sed do eiusmod </p><br />
      <p class="learnMoreVM">Learn More</p>
    </li>
    <li class="SW" rel="tabz3">
      <h2>Our Value</h2>
      <br />
      <p>Lorem ipsum dolor sit amet,sed do eiusmod.</p>
      <Br />
      <p class="learnMoreSW">Learn More</p>
    </li>
  </ul>

  <div class="tabz_container">
    <div class="tabzSC">
      <h3 class="tabz-accordion_heading" rel="tabz1">Secondary Containment</h3>
      <div id="tabz1" class="tabz_content">
        <div class="tabLeft">
          <img src="http://www.noupe.com/wp-content/uploads/2013/09/01-secrets-unique-product-photography.jpg" width="300px" />
        </div>
        <div class="tabRight">
          <h2 class="industrys">Secondary Containment<br /></h2>
          <p>The </p>
          <br />
          <br /><a class="oPage SC" href="http://localhost/wordpress/?page_id=233"><i class="fa fa-long-arrow-right"></i> Visit Overview Page</a>
        </div>
      </div>
    </div>
    <!-- #tab2 -->
    <div class="tabzVM">
      <h3 class="tabz-accordion_heading" rel="tabz2">Vaults and Manholes</h3>
      <div id="tabz2" class="tabz_content">
        <div class="tabLeft">
          <img src="https://4.bp.blogspot.com/_5rlxf3T9Z9U/TC5PBYV-p-I/AAAAAAAAIYA/BH74SEFthQg/lost+message.jpg" width="300px" />
        </div>
        <div class="tabRight">
          <h2 class="industrys">Vaults and Manholes<br /></h2>
          <p>The</p>
          <br />
          <br /><a class="oPage VM" href="#"><i class="fa fa-long-arrow-right"></i> Visit Overview Page</a>
        </div>
      </div>
    </div>
    <!-- #tab3 -->
    <div class="tabzSW">
      <h3 class="tabz-accordion_heading" rel="tabz3">Storm•Water</h3>
      <div id="tabz3" class="tabz_content">
        <div class="tabLeft">
          <img src="https://img0.etsystatic.com/018/1/5863088/il_570xN.492273122_aghw.jpg" width="300px" />
        </div>
        <div class="tabRight">
          <h2 class="industrys">Storm•Water<br /></h2>
          <p>The </p>
          <br />
          <br /><a class="oPage SW" href="#"><i class="fa fa-long-arrow-right"></i> Visit Overview Page</a>
        </div>
      </div>
    </div>
    <!-- #tab4 -->
  </div>

</section>

这是选项卡部分的完整代码，现在当我将其添加到我的编码网站时，这些选项卡不起作用。我已经尝试过各种操作，例如删除其他样式，删除整个页面设计并仅将整个代码复制粘贴到该页面中，但是没有任何效果，我认为codeigniter框架存在问题，导致选项卡无法正常工作，仅在codeigniter中选项卡不起作用，我还将代码上载到服务器中的文件夹中，并且该文件夹正常工作[在此处输入链接描述] [2]

我不知道Codeigniter的问题是什么，因为我对此很陌生。谁能告诉我这里可能出什么问题了。提前致谢。 [1]：https://www.booktheparty.in/aboutus [2]：http://booktheparty.in/zubi/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）