dtx9763 2014-05-26 10:15 采纳率: 100%
浏览 100
已采纳

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

Here is my updated code for index.php file.Now i think the problem is only in the tabs.Tabs are not showing properly.They are showing like a link.And i think the problem is only the naming convention now.

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>
  • 写回答

1条回答 默认 最新

  • dounieyan2036 2014-05-27 08:14
    关注

    If I understood you correctly, you do not need to store anything in session variables or cookies after all.

    The tutorial you linked explains how to do the tabs. You create two divs and show/hide them on the go. You can also create one div and two html files (one for each tab) that will contain the contents of the tabs (database and phone detail) and reload it with ajax. Up to you.

    You don't need many new things over what you have right now. I get it that you already have working tabs and only want to know how to pass the data between them. To do that, just use the variable with chosen filters in the function that is responsible for showing the details tab and switch the html of table like you did before wtih $('#phones tbody').html(makeTable(records));

    EDIT:

    Your fiddle is very wrong. Fix your "ul" and "li" tags so they are proper. Close your other opened tags. Put index.php content outside of tag. After you fix your html, look at attribute "class" of the tabs. It has to match properly with the selectors from jquery. Add containers for tab content:

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

    After that modify your jQuery. Add this (take a look at selectors!!! you have to either follow naming convention from example or change it everywhere):

    $('.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();
     });
    

    It'll for example prevent your site from reloading on clicking of a tab. Have in mind it will open you new tab when you click on it. If you want to open it on button click, add following code:

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

    It will open second tab and update the table like last time. Make sure the table is inside tab content container(#tab2).

    You can put it all in one file:

    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)