Question

我有多个文本/标签滑块jquery和2个按钮（下一个），（上一个） - 我需要在代码javascrpit中编辑隐藏按钮我需要在最后一个孩子/标签中隐藏按钮（下一个）并在第一个孩子/标签中隐藏按钮（上一个）我使用博主

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我注意到你的JS已经添加了＃34;禁用了＃34;按钮上的课程。

在CSS上添加.disabled{display:none;}肯定会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在第一个孩子中隐藏按钮prev

1 个答案: