使用该按钮的多个复选框选项划分为选项卡 - Multiple checkbox options using the button divide into tabs

这是我为index.php文件更新的代码。现在我认为问题只出在标签上。标签没有正确显示。它们就像一个链接。我认为现在的问题只是命名习惯。

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

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

您链接的教程解释了如何制作制表符。您可以创建两个div并在运行时显示/隐藏它们。还可以创建一个div和两个html文件(每个选项卡一个)，它们将包含选项卡的内容(数据库和电话详细信息)，并用ajax重新加载它。由你决定。

你不需要太多新的东西来取代你现在拥有的。我得到它，你已经有工作标签，只想知道如何传递它们之间的数据。要做到这一点，只需在负责显示详细信息选项卡的函数中使用带有选定过滤器的变量，并像之前使用$('#phones tbody').html(makeTable(records));

一样切换表的html编辑:

你的小提琴很不对。修复你的"ul"answers"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>