个人中心
gpt4 book ai didi

javascript - 如何在 HTML CSS Javascript 中完全显示 onclick 事件的隐藏选项卡

转载 作者：太空宇宙 更新时间：2023-11-04 13:23:06 25 4
gpt4 key购买 nike

我这里有一个小的工作元素。请查看这里的演示:demo我只需要通过完全隐藏选项卡来对此进行小的更改。所以当我运行这个元素时，只有 1 个选项卡应该是可见的。通过单击图像，只有 tab2 应该可见。在单击 tab2 上的过滤器按钮时，只有 tab1 应该可见。所以基本上我只想只显示 1 个选项卡。有什么帮助吗？谢谢。这是我的代码:

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

.active a{color:red !important; background-color:#fff !important}
.tab{display:none}
  </style>
  </head>
  <body> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 

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


        <div class="tab-content">
            <div id="tab1" class="tab" style='display:block'>
                <table id="phones">
                                <thead>
                                    <img id="filtered" src="edit.png" width="20" height="20" style="margin-top:20px; margin-left:10px; float: center;" >
                                <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>
                $(document).ready(function(){    
                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');
    // alert('.tabs ' + currentAttrValue);
     // Show/Hide Tabs

     $('.tab-content ' + 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);
          $('.tab-content #tab1').show().siblings().hide(); 
          e.preventDefault();
 });

 $("#filtered").on("click", function () {

          $('.tab-content #tab2').show().siblings().hide(); 
          e.preventDefault();
 });


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

      updatePhones();
});


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

最佳答案

解决了:

.tab-links li { display:none;}
.tab-links li.active { display:inline;}

http://jsfiddle.net/aK7NB/

我所做的基本上是给#nav li 的“display:none”，当他们有类“active”时，他们是 display:block.. 然后在 js 中，如果你想查看并删除它，只需提供事件类如果你想隐藏...检查示例

关于javascript - 如何在 HTML CSS Javascript 中完全显示 onclick 事件的隐藏选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23906466/

25 4 0
文章推荐： java - Java 中从字符串到二维字符数组
文章推荐： c++ - 如何在 C++ 中创建 map
文章推荐： java - 如何用java连接MQ并发送数据
文章推荐： c++ - VS2012 到 VS2015 迁移
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com