隱藏按鈕上一個

Question

我有多個文本/標籤滑塊jQuery和2鍵（下），（前） - 我需要在代碼JAVASCRPIT編輯的隱藏按鈕 我需要在最後一個孩子隱藏按鈕（下）/標籤，並在第一個孩子/標籤隱藏按鈕（上一張），我用博客

$(function() { 
 
    
 
    $("ul.large-tabs") 
 
     .tabs("div.large-panes > div.large-pane") 
 
     .slideshow({ 
 
      next: '.next', 
 
      prev: '.prev' 
 
     }); 
 
    
 
});

ul.table-tabs, ul.large-tabs { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul.large-tabs { 
 
    overflow: hidden; 
 
    margin-top: 22px; 
 
} 
 
.large-tabs li { 
 
    width: 230px; 
 
    float: left; 
 
    display: block; 
 
    height:47px; 
 
    -webkit-border-radius: 10px 10px 0 0; 
 
    -moz-border-radius: 10px 10px 0 0; 
 
    border-radius: 10px 10px 0 0; 
 
    text-decoration: none; 
 
} 
 
.large-tabs li h2 a { 
 
    text-decoration:none; 
 
    margin-left: 19px; 
 
    font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma; 
 
    font-size: 24px; 
 
    color:white; 
 
    margin-top:12px; 
 
    text-shadow:#000000 0px 2px; 
 
} 
 
.large-tabs { 
 
    text-align: center; 
 
display:none; 
 

 
} 
 
.large-tabs h2 { 
 
    font-size: 15px; 
 
    text-shadow:#000000 
 
} 
 
.large-tabs li:nth-child(2) { 
 
    margin: 0 3px; 
 
} 
 

 

 
.large-pane { 
 
    display:none; 
 
    overflow: hidden; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    padding:30px; 
 
} 
 
.large-pane p { 
 
    color:white; 
 
    margin:0 0 21px; 
 
} 
 

 
.large-panes { 
 
    background: #3e408a; 
 
    clear: both; 
 
    padding: 1px 13px 16px; 
 
    width: 670px; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    min-height:100px; 
 
} 
 

 
a.arrow { 
 
    cursor:pointer; 
 
    color:#fff; 
 
    font-size:16px; 
 
    position:absolute; 
 
    bottom:8px; 
 
    z-index:10; 
 
} 
 
a.rightarrow1 { 
 
    right:12px;  
 
} 
 
a.leftarrow1 { 
 
    left:12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 
 

 
<!-- the tabs --> 
 
<ul class="large-tabs"> 
 
    <li><h2><a href="#tab1">Tab 1</a></h2></li> 
 
    <li><h2><a href="#tab2">Tab 2</a></h2></li> 
 
    <li><h2><a href="#tab3">Tab 3</a></h2></li> 
 
</ul> 
 

 
<!-- tab "panes" --> 
 
<div class="large-panes"> 
 
    
 
    <!-- previous pane -->  
 
    <a class="prev arrow leftarrow1">&laquo; Prev</a> 
 
    
 
    <!-- tab 1 --> 
 
    <div id="div1" class="large-pane"> 
 
     <p>Tab 1 Text</p>   
 
    </div> 
 
    
 
    <!-- tab 2 --> 
 
    <div id="div2" class="large-pane"> 
 
     <p>Tab 2 Text</p> 
 
    </div> 
 
    
 
    <!-- tab 3 --> 
 
    <div id="div3" class="large-pane"> 
 
     <p>Tab 3 Text</p> 
 
    </div> 
 
    
 
    <!-- next pane --> 
 
    <a class="next arrow rightarrow1">Next &raquo;</a> 
 
    
 
</div>

Answer 1

我注意到，你的JS已經對你的按鈕添加「已禁用」類。

在您的CSS上添加.disabled{display:none;}肯定會訣竅。

$(function() { 
 
    
 
    $("ul.large-tabs") 
 
     .tabs("div.large-panes > div.large-pane") 
 
     .slideshow({ 
 
      next: '.next', 
 
      prev: '.prev' 
 
     }); 
 
    
 
});

ul.table-tabs, ul.large-tabs { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul.large-tabs { 
 
    overflow: hidden; 
 
    margin-top: 22px; 
 
} 
 
.large-tabs li { 
 
    width: 230px; 
 
    float: left; 
 
    display: block; 
 
    height:47px; 
 
    -webkit-border-radius: 10px 10px 0 0; 
 
    -moz-border-radius: 10px 10px 0 0; 
 
    border-radius: 10px 10px 0 0; 
 
    text-decoration: none; 
 
} 
 
.large-tabs li h2 a { 
 
    text-decoration:none; 
 
    margin-left: 19px; 
 
    font-family:"CoHeadlineRegular", Arial, Helvetica, Tahoma; 
 
    font-size: 24px; 
 
    color:white; 
 
    margin-top:12px; 
 
    text-shadow:#000000 0px 2px; 
 
} 
 
.large-tabs { 
 
    text-align: center; 
 
display:none; 
 

 
} 
 
.large-tabs h2 { 
 
    font-size: 15px; 
 
    text-shadow:#000000 
 
} 
 
.large-tabs li:nth-child(2) { 
 
    margin: 0 3px; 
 
} 
 

 

 
.large-pane { 
 
    display:none; 
 
    overflow: hidden; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    padding:30px; 
 
} 
 
.large-pane p { 
 
    color:white; 
 
    margin:0 0 21px; 
 
} 
 

 
.large-panes { 
 
    background: #3e408a; 
 
    clear: both; 
 
    padding: 1px 13px 16px; 
 
    width: 670px; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    min-height:100px; 
 
} 
 

 
a.arrow { 
 
    cursor:pointer; 
 
    color:#fff; 
 
    font-size:16px; 
 
    position:absolute; 
 
    bottom:8px; 
 
    z-index:10; 
 
} 
 
a.rightarrow1 { 
 
    right:12px;  
 
} 
 
a.leftarrow1 { 
 
    left:12px; 
 
} 
 
.disabled{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 
 

 
<!-- the tabs --> 
 
<ul class="large-tabs"> 
 
    <li><h2><a href="#tab1">Tab 1</a></h2></li> 
 
    <li><h2><a href="#tab2">Tab 2</a></h2></li> 
 
    <li><h2><a href="#tab3">Tab 3</a></h2></li> 
 
</ul> 
 

 
<!-- tab "panes" --> 
 
<div class="large-panes"> 
 
    
 
    <!-- previous pane -->  
 
    <a class="prev arrow leftarrow1">&laquo; Prev</a> 
 
    
 
    <!-- tab 1 --> 
 
    <div id="div1" class="large-pane"> 
 
     <p>Tab 1 Text</p>   
 
    </div> 
 
    
 
    <!-- tab 2 --> 
 
    <div id="div2" class="large-pane"> 
 
     <p>Tab 2 Text</p> 
 
    </div> 
 
    
 
    <!-- tab 3 --> 
 
    <div id="div3" class="large-pane"> 
 
     <p>Tab 3 Text</p> 
 
    </div> 
 
    
 
    <!-- next pane --> 
 
    <a class="next arrow rightarrow1">Next &raquo;</a> 
 
    
 
</div>