如何使用CSS和jQuery隐藏和显示选项卡内容

最新推荐文章于 2022-07-15 15:00:08 发布

cyan20115

最新推荐文章于 2022-07-15 15:00:08 发布

阅读量343

点赞数

文章标签： javascript ViewUI

演示：尝试单击选项卡

当我开发foodshaker.com时。我需要创建一个多标签导航来隐藏和显示标签内容。为了开发轻量级的多表，我决定使用jQuery和CSS来简化它。

1.解释

以下是导航示例：

<div>
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab1">Show Tab 1</a>
        </li>
        <li>
            <a href="#tab2">Show Tab 2</a>
        </li>
        <li>
            <a href="#tab3">Show Tab 3</a>
        </li>
    </ul>
</div>

必须指出要显示的导航，因此我使用“活动” CSS类名来表示它。 “ nav nav-tabs”用于设置导航的外观。每个导航链接<a>具有选项卡内容jQuery选择器的目标。

例如： href="#tab1" ，href属性的值将用于创建jQuery对象并显示内容。

以下是标签内容的示例：

<section id="tab1" class="tab-content active">
    <div>
        Content in tab 1
    </div>
</section>
<section id="tab2" class="tab-content hide">
    <div>
        Content in tab 2
    </div>
</section>
<section id="tab3" class="tab-content hide">
    <div>
        Content in tab 3
    </div>
</section>

CSS类名“ hide”用于将显示样式设置为无，其中：

.tab-content.hide{
    display: none;
}

CSS类名“ active”用于设置要显示的显示的样式，其中：

.tab-content.active{
    display: block;
}

为了简化导航的click事件，我们需要如下所示的“ click”事件：

$('.nav-tabs > li > a').click(function(event){
   //...... logic to hide and show tab content
}

首先，我们需要查找显示的导航和显示标签内容。从而：

//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');

然后，我们找到激活的导航并将其更改为不活动：

//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');

此外，我们需要将点击的导航更改为活动状态：

//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');

显示目标标签内容：

var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');

2.完整的例子

完整的HTML源代码以使用CSS和jQuery隐藏和显示选项卡内容。

<html>
  <head>
	<title>How to use CSS and jQuery to hide and show tab content</title>
		
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script>
	$(document).ready(function() {
		$('.nav-tabs > li > a').click(function(event){
		event.preventDefault();//stop browser to take action for clicked anchor
					
		//get displaying tab content jQuery selector
		var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');					
					
		//find actived navigation and remove 'active' css
		var actived_nav = $('.nav-tabs > li.active');
		actived_nav.removeClass('active');
					
		//add 'active' css into clicked navigation
		$(this).parents('li').addClass('active');
					
		//hide displaying tab content
		$(active_tab_selector).removeClass('active');
		$(active_tab_selector).addClass('hide');
					
		//show target tab content
		var target_tab_selector = $(this).attr('href');
		$(target_tab_selector).removeClass('hide');
		$(target_tab_selector).addClass('active');
	     });
	  });
	</script>
		<style>
			/** Start: to style navigation tab **/
			.nav {
			  margin-bottom: 18px;
			  margin-left: 0;
			  list-style: none;
			}

			.nav > li > a {
			  display: block;
			}
			
			.nav-tabs{
			  *zoom: 1;
			}

			.nav-tabs:before,
			.nav-tabs:after {
			  display: table;
			  content: "";
			}

			.nav-tabs:after {
			  clear: both;
			}

			.nav-tabs > li {
			  float: left;
			}

			.nav-tabs > li > a {
			  padding-right: 12px;
			  padding-left: 12px;
			  margin-right: 2px;
			  line-height: 14px;
			}

			.nav-tabs {
			  border-bottom: 1px solid #ddd;
			}

			.nav-tabs > li {
			  margin-bottom: -1px;
			}

			.nav-tabs > li > a {
			  padding-top: 8px;
			  padding-bottom: 8px;
			  line-height: 18px;
			  border: 1px solid transparent;
			  -webkit-border-radius: 4px 4px 0 0;
				 -moz-border-radius: 4px 4px 0 0;
					  border-radius: 4px 4px 0 0;
			}

			.nav-tabs > li > a:hover {
			  border-color: #eeeeee #eeeeee #dddddd;
			}

			.nav-tabs > .active > a,
			.nav-tabs > .active > a:hover {
			  color: #555555;
			  cursor: default;
			  background-color: #ffffff;
			  border: 1px solid #ddd;
			  border-bottom-color: transparent;
			}
			
			li {
			  line-height: 18px;
			}
			
			.tab-content.active{
				display: block;
			}
			
			.tab-content.hide{
				display: none;
			}
			
			
			/** End: to style navigation tab **/
		</style>
	</head>
	<body>
		<div>
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#tab1">Show Tab 1</a>
				</li>
				<li>
					<a href="#tab2">Show Tab 2</a>
				</li>
				<li>
					<a href="#tab3">Show Tab 3</a>
				</li>
			</ul>	
		</div>
		<section id="tab1" class="tab-content active">
			<div>
				Content in tab 1
			</div>
		</section>
		<section id="tab2" class="tab-content hide">
			<div>
				Content in tab 2
			</div>
		</section>
		<section id="tab3" class="tab-content hide">
			<div>
				Content in tab 3
			</div>
		</section>
	</body>
</html>

下载源代码

下载它- 如何使用CSS和jQuery隐藏和显示选项卡content.zip （1 KB）

翻译自: https://mkyong.com/jquery/how-to-use-css-and-jquery-to-hide-and-show-tab-content/

cyan20115

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用CSS和jQuery隐藏和显示选项卡内容

演示：尝试单击选项卡当我开发foodshaker.com时。我需要创建一个多标签导航来隐藏和显示标签内容。为了开发轻量级的多表，我决定使用jQuery和CSS来简化它。 1.解释以下是导航示例： <div> <ul class="nav nav-tabs"> <li class="active"> ...
复制链接

扫一扫