个人中心
gpt4 book ai didi

javascript - 选项卡在 HTML CSS Javascript 中不起作用

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

我有一个小元素，我在其中使用使用 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>

最佳答案

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

THIS DEMO

关于javascript - 选项卡在 HTML CSS Javascript 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23904189/

25 4 0
文章推荐： php - 如何在文本字段中设置带有图像的 HTML 表单的半透明背景
文章推荐： linux - Net-snmp编写MIB模块
文章推荐： linux - Mono 在 Ubuntu 上抛出 OutOfMemoryException，但在 OSX 或 Windows 上则不会
文章推荐： css - 更少地设置响应式样式表？
太空宇宙
个人简介

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

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