堆棧內存溢出
  簡體   English   中英

標簽在HTML CSS Javascript中不起作用

[英]Tabs are not working in HTML CSS Javascript

 原文  2014-05-28 06:24:11  7   2    javascript/ html/ css/ tabs/ jquery-tabs

問題描述

我有一個小項目，其中我正在使用使用HTML CSS的標簽。 請在此處查看演示： demo 。 但不幸的是，我的標簽無法正常工作，無法正常工作。 我不知道我在哪里犯小錯誤。有幫助嗎？ 謝謝。 這是我的HTML CSS和Javascript代碼： 

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, #tab-links 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;
}
  </style>
  </head>
  <body> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 

  <div class="tabs">
           <ul id="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>

2 個解決方案

解決方案1
 1 已采納  2014-05-28 06:51:48

我建議在CSS上使用選項卡的版本

的HTML 

<section id="head">Tabs using CSS3</section>

<section class="tabs">
    <input id="tab_1" type="radio" name="tab" checked="checked" />
    <input id="tab_2" type="radio" name="tab" />
    <input id="tab_3" type="radio" name="tab" />
    <label for="tab_1" id="tab_l1">Tab One</label>
    <label for="tab_2" id="tab_l2">Tab Two</label>
    <label for="tab_3" id="tab_l3">Tab Three</label>
    <div style="clear:both"></div>

    <div class="tabs_cont">
        <div id="tab_c1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, diam vel mollis laoreet, dolor dolor fringilla ligula, at condimentum velit dui a arcu. Integer dapibus sapien eu tellus ullamcorper adipiscing. Aliquam congue interdum venenatis. Sed ornare pulvinar commodo. Vivamus faucibus velit enim. Nulla at lorem felis, quis condimentum felis. Nulla luctus consequat tellus at faucibus. Donec et felis at lacus lobortis luctus. In quis nisl metus. Aenean ultricies augue in sem elementum consequat. Vestibulum convallis sollicitudin venenatis. Aliquam et enim lacus.</p>
            <p>Integer sapien erat, convallis pulvinar tempor sit amet, placerat in metus. Mauris volutpat porttitor magna euismod sodales. Ut quis consequat augue. Curabitur ut neque sed purus accumsan feugiat sed sit amet lacus. Donec blandit scelerisque metus, nec consectetur odio varius et. Nulla nibh nibh, pellentesque et mattis eget, rutrum porttitor nulla. Aliquam pharetra augue quis nisl luctus sit amet convallis augue consequat.</p>
        </div>
        <div id="tab_c2">
            <p>Integer sapien erat, convallis pulvinar tempor sit amet, placerat in metus. Mauris volutpat porttitor magna euismod sodales. Ut quis consequat augue. Curabitur ut neque sed purus accumsan feugiat sed sit amet lacus. Donec blandit scelerisque metus, nec consectetur odio varius et. Nulla nibh nibh, pellentesque et mattis eget, rutrum porttitor nulla. Aliquam pharetra augue quis nisl luctus sit amet convallis augue consequat.</p>
            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dictum, sapien sed tincidunt condimentum, turpis purus sollicitudin urna, eget ullamcorper quam libero mattis odio. Nulla eget augue est, vitae egestas nibh. Morbi eu neque sed ante gravida vestibulum et a risus. Nullam ultrices eleifend augue id lacinia. Cras at sapien urna, sit amet pharetra neque. Praesent non sem eu justo malesuada vestibulum id ac nisl. Cras accumsan velit eget quam dictum commodo. Donec iaculis ipsum eu arcu aliquet pellentesque. Donec non velit nec arcu auctor egestas. Etiam consectetur tellus sed eros convallis placerat.</p>
        </div>
        <div id="tab_c3">
            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dictum, sapien sed tincidunt condimentum, turpis purus sollicitudin urna, eget ullamcorper quam libero mattis odio. Nulla eget augue est, vitae egestas nibh. Morbi eu neque sed ante gravida vestibulum et a risus. Nullam ultrices eleifend augue id lacinia. Cras at sapien urna, sit amet pharetra neque. Praesent non sem eu justo malesuada vestibulum id ac nisl. Cras accumsan velit eget quam dictum commodo. Donec iaculis ipsum eu arcu aliquet pellentesque. Donec non velit nec arcu auctor egestas. Etiam consectetur tellus sed eros convallis placerat.</p>
            <p>Vivamus imperdiet varius urna, sed ullamcorper enim interdum ac. Quisque nibh risus, auctor quis ultricies non, ultricies ut purus. Mauris vitae augue erat. Praesent blandit diam at est laoreet suscipit. Vivamus mauris quam, gravida ultricies sodales sit amet, commodo a eros. Vestibulum varius sollicitudin nisl, vitae sollicitudin dolor aliquet in. Duis et nulla mi. Morbi sit amet mi nisl. Cras eu augue libero. Cras laoreet ligula in augue tempus accumsan.</p>
        </div>
    </div>
</section>

的CSS 

.tabs {
    position: relative;
    margin: 0 auto;
    width: 800px;}
.tabs label {
    display: block;
    float: left;
    background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQlIiBzdG9wLWNvbG9yPSIjZWZmMGY0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGVlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #ffffff 0%, #eff0f4 4%, #dddee0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(4%,#eff0f4), color-stop(100%,#dddee0));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#eff0f4 4%,#dddee0 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#eff0f4 4%,#dddee0 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#eff0f4 4%,#dddee0 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#eff0f4 4%,#dddee0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddee0',GradientType=0 );
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    border-right: 1px solid #f3f3f3;
    border-left: 1px solid #ccc;
    color: #555;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    top: 2px;
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: #fff 0 1px 0;
    z-index: 1;}
.tabs input {
    position: absolute;
    left: -9999px;}
#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
    background: #fff;
    border-color: #fff;
    top: 0;
    z-index: 3;}

.tabs_cont {
    background: #fff;
    -moz-border-radius: 0 6px 6px 6px;
    -webkit-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    -moz-box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.1);
    padding: 20px 25px;
    position: relative;
    z-index: 2;
    height: 230px;}
.tabs_cont > div {
    position: absolute;
    left: -9999px;
    top: 0;
    opacity: 0;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;}

#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
    position: static;
    left: 0;
    opacity: 1;}

這個演示

解決方案2
 1  2014-05-28 07:04:21

我已經更新了您的CSS和jquery。 我還應用了選定的標簽樣式。 檢查下面的jsfiddle。 

$(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);
      ("#tab2").show().siblings().hide();
 });


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

  updatePhones();
});

http://jsfiddle.net/nLkZG/18/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML / CSS和javascript中的標簽內的標簽？ 帶標簽的HTML，CSS和javascript編輯器？ 在HTML / CSS / javascript中，單擊和將鼠標懸停在子選項卡中的選項卡上時，代碼無法按預期工作 JavaScript無法在單個HTML頁面的所有選項卡上運行 嵌入HTML的Javascript和CSS無法正常工作 懸停不適用於Javascript，CSS和HTML 如何在HTML CSS Javascript中完全顯示onclick事件的隱藏選項卡 Materialize css選項卡不起作用 使用 html 和 javascript 創建選項卡 HTML選項卡不起作用的示例
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM