开发者

Hide jQuery tab using css

开发者 https://www.devze.com 2023-04-04 04:22 出处:网络
Jquery tab control displaying 7 tabs.When I print the pa开发者_如何学编程ge I only want tab 4 to print.How can I hide tabs 1-3 and 5-7 of the jQuery tab control in css?Thanks.You\'ll want to set their

Jquery tab control displaying 7 tabs. When I print the pa开发者_如何学编程ge I only want tab 4 to print. How can I hide tabs 1-3 and 5-7 of the jQuery tab control in css? Thanks.


You'll want to set their display to none as follows:

display: none;

You'll want to add it to all elements of tabs you want hidden. For example:

.hideTabId {
    display: none;
}


Let say you have the folowing html:

<div id="tabcontainer">
    <div class="tab">tab 1</div>
    <div class="tab">tab 2</div>
    <div class="tab">tab 3</div>
    <div class="tab">tab 4</div>
    <div class="tab">tab 5</div>
    <div class="tab">tab 6</div>
    <div class="tab">tab 7</div>
</div>

You can do it with css:

.tab {
  display:none;
}

.tab:nth-child(4) {
    display: block;
}

Or jQuery

$(".tab").hide();
$(".tab:nth-child(4)").show(); // you can also do $(".tab").eq(3).show();

jsFiddle example

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号