javascript - 使用按钮的多个复选框选项分为选项卡

标签 javascript php ajax tabs

这是我更新的index.php文件代码。现在我认为问题只出现在选项卡中。选项卡没有正确显示。它们显示得像一个链接。我认为问题只是现在的命名约定。

索引.php

 <html>
  <head>
    <meta charset="utf-8">
    <title>Dashboards</title>
    <style>
      body {
        padding: 5px;
      }
      margin : 5px;
    font: Verdana, Helvetica, Arial;
    padding: 0px;
    background: #fff;
}

body {
    margin : 10px;
    font: Verdana, Helvetica, Arial;
    padding: 0px;
    background: #fff;
}

#tab-links {
    border-bottom : 1px solid #ccc;
    margin : 0;
    padding-bottom : 19px;
    padding-left : 10px;
}

#tab-links ul, #tab-links li    {
    display : inline;
    list-style-type : none;
    margin : 0;
    padding : 0;
}


#tab-links a:link, #tab-links a:visited {
    background : #E8EBF0;
    border : 1px solid #ccc;
    color : #666;
    float : left;
    font-size : small;
    font-weight : normal;
    line-height : 14px;
    margin-right : 8px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
}

#tab-links a:link.active, #menu a:visited.active    {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
}

#tab-links a:hover  {
    color : #f00;
}


body.tabs #tab-links li#nav-1 a, 
body.tabs #tab-links li#nav-2 a {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
}

#tab-links #subnav-1,
#tab-links #subnav-2 {
    display : none;
    width: 90%;
}

body.tabs #tab-links ul#subnav-1, 
body.tabs #tab-links ul#subnav-2 {
    display : inline;
    left : 10px;
    position : absolute;
    top : 95px;
}

body.tabs #tab-links ul#subnav-1 a, 
body.tabs #tab-links ul#subnav-2 a {
    background : #fff;
    border : none;
    border-left : 1px solid #ccc;
    color : #999;
    font-size : smaller;
    font-weight : bold;
    line-height : 10px;
    margin-right : 4px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
}

 #tab-links ul a:hover {
    color : #f00 !important;
}

#contents {
    background : #fff;
    border : 1px solid #ccc;
    border-top : none;
    clear : both;
    margin : 0px;
    padding : 15px;
}

     #phones {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 12px;
        background: #fff;
        margin: 15px 25px 0 0;
        border-collapse: collapse;
        text-align: left;
        float: left;
      }

      #phones th {
        font-size: 14px;
        font-weight: normal;
        color: #039;
        padding: 0px 1px;
        border-bottom: 12px solid #6678b1;
      }

      #phones td {
        border-bottom: 0px solid #ccc;
        color: #669;
        padding: 1px 1px;
      }

      #phones tbody tr:hover td {
        color: #009;
      }

      #filter {
        float:left;
      }

      fieldset{
        margin-top: 15px;
      }

      fieldset div{
        padding:0 0 5px 0;
      }

      .amount{
        width:50px;
      }
    </style>
  </head>
  <body> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

  <div class="tabs">
           <ul class="tab-links">
              <li id="nav-1"><a href="#tab1">Tab #1</a></li>
              <li id="nav-2"><a href="#tab2">Tab #2</a></li>
            </ul>
        </div>


        <div class="tab-content">
            <div id="tab1" class="tab active">
                <table id="phones">
                                <thead>
                                <tr>

                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                    </table>
                    </div>

                    <div id="tab2" class="tab">
                        <input type="checkbox" id="Anzahl_Fahrzeuge_mit_und_ohne_Bilder" checked>
        <label for="Anzahl_Fahrzeuge_mit_und_ohne_Bilder">Anzahl_Fahrzeuge_mit_und_ohne_Bilder</label><br>

             <input type="checkbox" id="Fahrzeuge_ohne_Preis" checked>
        <label for="Fahrzeuge_ohne_Preis">Fahrzeuge_ohne_Preis</label>
        <button id="submitFilter">Filter</button> 
      </div>
    </div>



        <script>
      function makeTable(data){
        var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "",
              currRecord = this;

          $.each(this, function(k , v) {
            if(k==='model'){
              v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
            } else if (k==='price'){
              v = "<span class='price'>" + v + "</span>";
            }
            tbl_row += "<td>"+v+"</td>";
          })
          tbl_body += "<tr>"+tbl_row+"</tr>";
        })

        return tbl_body;
      }

      function getPhoneFilterOptions() {
     var opts = [];
     $("input[type=checkbox]").each(function () {
         if (this.checked) {
             opts.push($(this).attr("id"));
         }
     });

     return opts;
 }

      function updatePhones(opts){
        if(!opts || !opts.length){
          opts = allBrands;
        }

        $.ajax({
          type: "POST",
          url: "submit.php",
          dataType : 'json',
          cache: false,
          data: {filterOpts: opts},
          success: function(records){
            $('#phones tbody').html(makeTable(records));

          }
        });
      }    

            $('.tabs .tab-links a').on('click', function (e) {
     var currentAttrValue = $(this).attr('href');

     // Show/Hide Tabs
     $('.tabs ' + currentAttrValue).show().siblings().hide();

     // Change/remove current tab to active
     $(this).parent('li').addClass('active').siblings().removeClass('active');

     e.preventDefault();
 });

      $("#submitFilter").on("click", function () {
     var opts = getPhoneFilterOptions();
          updatePhones(opts);
          ("#tab2").show().siblings().hide();
 });


      var allBrands = [];
      $("input[type=checkbox]").each(function(){
        allBrands.push($(this)[0].id)
      })

      updatePhones();

    </script> 
  </body> 
</html>

最佳答案

如果我理解正确，那么您根本不需要在 session 变量或 cookie 中存储任何内容。

tutorial you linked解释如何做选项卡。您创建两个 div 并随时显示/隐藏它们。您还可以创建一个 div 和两个 html 文件(每个选项卡一个)，其中包含选项卡的内容(数据库和电话详细信息)，并使用 ajax 重新加载它。由你决定。

你不需要比现在拥有的更多新东西。我知道您已经有工作选项卡，只想知道如何在它们之间传递数据。为此，只需在负责显示详细信息选项卡的函数中使用带有所选过滤器的变量，并像之前使用 $('#phones tbody').html(makeTable(records) 一样切换表的 html ))；

编辑:

你的 fiddle 是非常错误的。修复您的“ul”和“li”标签，使它们正确。关闭其他打开的标签。将index.php 内容放在标签之外。修复 html 后，查看选项卡的属性“class”。它必须与 jquery 中的选择器正确匹配。为选项卡内容添加容器:

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>
</div>
<div class="tab-content">
    <div id="tab1" class="tab active">
         <!-- your filter here -->
    </div>
    <div id="tab2" class="tab">
        <!-- your table here -->
    </div>
</div>

之后修改你的 jQuery.添加此内容(看看选择器!!!您必须遵循示例中的命名约定或在各处更改它):

$('.tabs .tab-links a').on('click', function (e) {
     var currentAttrValue = $(this).attr('href');

     // Show/Hide Tabs
     $('.tabs ' + currentAttrValue).show().siblings().hide();

     // Change/remove current tab to active
     $(this).parent('li').addClass('active').siblings().removeClass('active');

     e.preventDefault();
 });

例如，它会阻止您的网站在单击选项卡时重新加载。请记住，当您单击它时，它会打开新选项卡。如果您想通过单击按钮打开它，请添加以下代码:

 $("#submitFilter").on("click", function () {
     var opts = getPhoneFilterOptions();
     ("#tab2").show().siblings().hide();
     updatePhones(opts);
 });

它将打开第二个选项卡并像上次一样更新表格。确保表格位于选项卡内容容器(#tab2)内。

您可以将所有内容放入一个文件中:

<html>
    <body>
       (...)
       <div class="tabs">
           <ul class="tab-links">
              <li class="active"><a href="#tab1">Tab #1</a></li>
              <li><a href="#tab2">Tab #2</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div id="tab1" class="tab active">
                <!-- your filter here -->
           </div>
           <div id="tab2" class="tab">
                    <!-- your table here -->
           </div>
       </div>
       (...)
       <script>
       // your script here
           (...)
           $('.tabs .tab-links a').on('click', function (e) {
               var currentAttrValue = $(this).attr('href');

               // Show/Hide Tabs
               $('.tabs ' + currentAttrValue).show().siblings().hide();

               // Change/remove current tab to active
               $(this).parent('li').addClass('active').siblings().removeClass('active');

               e.preventDefault();
           });
           $("#submitFilter").on("click", function () {
              var opts = getPhoneFilterOptions();
              ("#tab2").show().siblings().hide();
              updatePhones(opts);
           });
           (...)
       </script>
    </body>
</html>

关于javascript - 使用按钮的多个复选框选项分为选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23867859/

上一篇：javascript - boxy.confirm 不要等待确认

下一篇：javascript - EmberJS 无法设置未定义的属性 'store' (DS.hasMany)

相关文章：

javascript - AngularJS 中的数字格式

Javascript，重组数组

JavaScript/Ajax - 检查另一个页面上的数据是否不同

php - 根据给定日期连接两个表时列出唯一行

php - 这个PHP登录功能安全吗？

asp.net - Jquery.获取ashx页面

jquery - jQuery ajax错误处理程序函数存在，但仍引发异常

javascript - 是否可以压缩代码以允许多个变量而不是每个变量一行？

javascript - 使用 jQuery 在表单外部序列化动态生成的 HTML 输入元素

jquery - Uncaught ReferenceError : jQuery22303175114964962158_1470743444495 is not defined in JSONP AJAX request

©2024 IT工具网  联系我们