logo标签列表

页面上的多个选项卡区域

javascriptjqueryhtmlcss
3

我需要在页面上有多个选项卡区域，目前它们一起工作，当您在其中一个选项卡上单击时，它会影响其他选项卡。

您可以在此处查看其工作方式：https://jsfiddle.net/pxpsvoc6/

我的html内容如下：

<div class="recom-content">

    <ul class="tabs">
        <li class="active" rel="overview1">Overview</li>
        <li rel="prices1">Prices</li>
    </ul>
    <!--Close Tabs Menu-->

    <div class="tab_container">

        <h3 class="tab_drawer_heading" rel="overview1">Overview</h3>
        <div id="overview1" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>

        <h3 class="tab_drawer_heading" rel="prices1">Prices</h3>
        <div id="prices1" class="tab_content">
            conetasd
        </div>

    </div>
    <!--Close Tabs Container-->

    </div>
    <!--Close Recom Content-->



        <div class="recom-content">

    <ul class="tabs">
        <li class="active" rel="overview2">Overview</li>
        <li rel="prices2">Prices</li>
    </ul>
    <!--Close Tabs Menu-->

    <div class="tab_container">

        <h3 class="tab_drawer_heading" rel="overview2">Overview</h3>
        <div id="overview2" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>

        <h3 class="tab_drawer_heading" rel="prices2">Prices</h3>
        <div id="prices2" class="tab_content">
            conetasd
        </div>

    </div>
    <!--Close Tabs Container-->

    </div>
    <!--Close Recom Content-->

我的CSS:

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px;
    width: 100%;
    margin-bottom:10%;
}

ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    height: 75px;
    width:50%;
    background-color: #000000;
    overflow: hidden;
    position: relative;

    font-family: 'montserratlight';
    font-size:15px;
    line-height:75px;
    color:#ffffff;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:10px;
    letter-spacing:1px;

}

ul.tabs li:hover {
    background-color:#525252;
    color: #ffffff;
}

ul.tabs li.active {
    background-color:#ffffff;
    color: #000000;
    display: block;
    font-family: 'montserratregular';
}

.tab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 400px;
    background-color:#ffffff;
    overflow: auto;
}

.tab_content {
    padding: 10%;
    display: none;
}

.tab_content h2 {
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:4px;
}

.tab_content hr {
    width:20%;
    margin-left:0px;
    margin-top:20px;
    margin-bottom:20px;

    border:1px solid #dadcdf;
}

.tab_content p:last-of-type {
    margin-bottom:0px;
}


.recom-content  {
    width:200px;
    height:auto;
    display:table-cell;
    vertical-align:top;
    text-align:left;
    border:1px solid #dadcdf;
}


.tab_drawer_heading { display: none; }

@media screen and (max-width: 768px) {
    .tabs {
        display: none;
    }
    .tab_drawer_heading {

        font-family: 'montserratregular';
        font-size:13px;
        line-height:50px;
        color:#ffffff;
        text-transform:uppercase;
        margin-bottom:10px;
        letter-spacing:0px;
        text-align:center;

        background-color:#b1b8be;
        margin: 0;
        padding: 2px 0px;
        display: block;
        cursor: pointer;
        border-bottom:1px solid #a8afb7;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .d_active {
        background-color:#6f787e;
        color: #fff;
    }
}

JS:

// tabbed content
    // http://www.entheosweb.com/tutorials/css/tabs.asp
    $(".tab_content").hide();
    $(".tab_content:first").show();

  /* if in tab mode */
    $("ul.tabs li").click(function() {

      $(".tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        

      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");

      $(".tab_drawer_heading").removeClass("d_active");
      $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

    });
    /* if in drawer mode */
    $(".tab_drawer_heading").click(function() {

      $(".tab_content").hide();
      var d_activeTab = $(this).attr("rel"); 
      $("#"+d_activeTab).fadeIn();

      $(".tab_drawer_heading").removeClass("d_active");
      $(this).addClass("d_active");

      $("ul.tabs li").removeClass("active");
      $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });


    /* Extra class "tab_last" 
       to add border to right side
       of last tab */
    $('ul.tabs li').last().addClass("tab_last");
2个回答
2
重点是您有多个相同代码的出现。您不能简单地使用类，因为每个出现都具有相同的类。
您必须提供一个“父级”，在其中找到要应用修改的元素。
var parent = $(this).parents(".recom-content");
parent.find(".tab_content").hide();

这是您修改后的代码片段：

// tabbed content
// http://www.entheosweb.com/tutorials/css/tabs.asp
$(".recom-content").find(".tab_content").hide();
$(".recom-content").find(".tab_content:first").show();

/* if in tab mode */
$("ul.tabs li").click(function() {
    var parent = $(this).parents(".recom-content"),
        activeTab = $(this).attr("rel");
    
    parent.find(".tab_content").hide();
    $("#"+activeTab).fadeIn();  
    
    parent.find("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    
    parent.find(".tab_drawer_heading").removeClass("d_active");
    parent.find(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
    
});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
    var parent = $(this).parents(".recom-content"),
        d_activeTab = $(this).attr("rel"); 
  
    parent.find(".tab_content").hide();
    $("#"+d_activeTab).fadeIn();
    
    parent.find(".tab_drawer_heading").removeClass("d_active");
    parent.find(this).addClass("d_active");
    
    parent.find("ul.tabs li").removeClass("active");
    parent.find("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});

/* Extra class "tab_last" 
to add border to right side
of last tab */
$('.recom-content').find('ul.tabs li:last').addClass("tab_last");
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 50px;
 width: 100%;
 margin-bottom:10%;
}

ul.tabs li {
 float: left;
 margin: 0;
 cursor: pointer;
 height: 75px;
 width:50%;
 background-color: #000000;
 overflow: hidden;
 position: relative;

 font-family: 'montserratlight';
 font-size:15px;
 line-height:75px;
 color:#ffffff;
 text-transform:uppercase;
 text-align:center;
 margin-bottom:10px;
 letter-spacing:1px;

}

ul.tabs li:hover {
 background-color:#525252;
 color: #ffffff;
}

ul.tabs li.active {
 background-color:#ffffff;
 color: #000000;
 display: block;
 font-family: 'montserratregular';
}

.tab_container {
 border-top: none;
 clear: both;
 float: left;
 width: 400px;
 background-color:#ffffff;
 overflow: auto;
}

.tab_content {
 padding: 10%;
 display: none;
}

.tab_content h2 {
 text-transform:uppercase;
 letter-spacing:3px;
 margin-bottom:4px;
}

.tab_content hr {
 width:20%;
 margin-left:0px;
 margin-top:20px;
 margin-bottom:20px;

 border:1px solid #dadcdf;
}

.tab_content p:last-of-type {
 margin-bottom:0px;
}


.recom-content {
 width:200px;
 height:auto;
 display:table-cell;
 vertical-align:top;
 text-align:left;
 border:1px solid #dadcdf;
}


.tab_drawer_heading { display: none; }

@media screen and (max-width: 768px) {
 .tabs {
  display: none;
 }
 .tab_drawer_heading {

  font-family: 'montserratregular';
  font-size:13px;
  line-height:50px;
  color:#ffffff;
  text-transform:uppercase;
  margin-bottom:10px;
  letter-spacing:0px;
  text-align:center;

  background-color:#b1b8be;
  margin: 0;
  padding: 2px 0px;
  display: block;
  cursor: pointer;
  border-bottom:1px solid #a8afb7;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 .d_active {
  background-color:#6f787e;
  color: #fff;
 }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="recom-content">
    <ul class="tabs">
        <li class="active" rel="overview1">Overview 1</li>
        <li rel="prices1">Prices 1</li>
    </ul>
    <!--Close Tabs Menu-->
    
    <div class="tab_container">
        
        <h3 class="tab_drawer_heading" rel="overview1">Overview</h3>
        <div id="overview1" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>
        
        <h3 class="tab_drawer_heading" rel="prices1">Prices</h3>
        <div id="prices1" class="tab_content">
            conetasd
        </div>
        
    </div>
    <!--Close Tabs Container-->
    
</div>
<!--Close Recom Content-->



<div class="recom-content">
    
    <ul class="tabs">
        <li class="active" rel="overview2">Overview 2</li>
        <li rel="prices2">Prices 2</li>
    </ul>
    <!--Close Tabs Menu-->
    
    <div class="tab_container">
        
        <h3 class="tab_drawer_heading" rel="overview2">Overview</h3>
        <div id="overview2" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>
        
        <h3 class="tab_drawer_heading" rel="prices2">Prices</h3>
        <div id="prices2" class="tab_content">
            conetasd
        </div>
        
    </div>
    <!--Close Tabs Container-->
    
</div>
<!--Close Recom Content-->

这在我只将它们作为静态框时非常好用。我试图在滑块内创建这个，但似乎不起作用...你可以在这里看到它：http://pagedev.co.uk/iselfdrive2/about.php 我本以为它仍然会有效？ - lbollu
我清除了缓存。在点击第二张幻灯片标签之前，它工作得很好，但一旦点击，就会影响布局，然后标签停止加载内容。如果你看一下我上面评论中的链接，希望它对你也产生同样的问题？任何帮助都将不胜感激！感到有压力！ - lbollu
我已经发现只有在点击最后一个选项卡时才会发生错误。如果我在这两个之间添加另一个幻灯片，那么问题就变成了第三张幻灯片才会出现问题。 - lbollu
可能存在问题：$('.recom-content ul.tabs li').last().addClass("tab_last");。请使用以下代码替换：$('.recom-content').find('ul.tabs li:last').addClass("tab_last");。 - pistou
1
嗨，伙计，我解决了。它不喜欢垂直滑动。淡入淡出可以正常工作！感谢你的帮助！ - lbollu
显示剩余2条评论
1

您需要更改隐藏语句：

$(".tab_content").hide();

到

$(this).parents(".recom-content").find(".tab_content").hide();

你的选择器隐藏了所有的tab_content项，它只应该隐藏其父级recom-content DIV的后代项。
这个效果在静态框中非常好！但我试图在一个滑块中创建它，似乎不起作用...你可以在这里看到它：pagedev.co.uk/iselfdrive2/about.php。我本以为它仍然会起作用呢？ - lbollu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接