jquery tabs使用最简化实例

最新推荐文章于 2023-06-07 13:32:21 发布

生活在他方

最新推荐文章于 2023-06-07 13:32:21 发布

阅读量6k

点赞数

分类专栏：网站管理员日记文章标签： tabs jquery class div function xhtml

本文链接：https://blog.csdn.net/wuyt2008/article/details/7870687

版权

网站管理员日记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jquery tabs是个jquery的选项卡或者说是标签插件。像我这样的可怜的网站管理员，要把美工扔过来的切好图的html页面加上标签功能，再放到网站上。这里给出一个tabs插件最简单的调用方法，给所有像我这样的初学者。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tabs demo min</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.core.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.widget.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.tabs.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#div_out').tabs();
		//$('#div_out').tabs({event: "mouseover"});
	});
</script>
<style type="text/css">
.ui-tabs-hide {
	display: none !important;
}
</style>
</head>
<body>
<div id="div_out">
  <ul>
    <li><a href="#div-1">论语</a> </li>
    <li><a href="#div-2">孟子</a> </li>
    <li><a href="#div-3">大学</a> </li>
    <li><a href="#div-4">中庸</a> </li>
  </ul>
  <div id="div-1">哀公问曰：何为则民服？ 孔子对曰：举直错诸枉，则民服；举枉错诸直，则民不服。</div>
  <div id="div-2">王曰：“寡人有疾，寡人好色。”</div>
  <div id="div-3">大学之道，在明明德，在亲民，在止于至善。</div>
  <div id="div-4">子曰，好学近乎知。力行近乎仁。知耻近乎勇。</div>
</div>
</body>
</html>

为了找出隐藏面板的样式话了我不少时间，最后在firefox的web develop扩展有个查看选中区域源代码的功能，可以方便查看javascript影响下的代码，帮了不少忙。

上面的代码，运行后的情况如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery tabs demo min</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.core.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.widget.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.tabs.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#div_out').tabs();
		//$('#div_out').tabs({event: "mouseover"});
	});
</script>
<style type="text/css">
.ui-tabs-hide {
	display: none !important;
}
</style>
</head>
<body>
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="div_out">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#div-1">论语</a> </li>
    <li class="ui-state-default ui-corner-top"><a href="#div-2">孟子</a> </li>
    <li class="ui-state-default ui-corner-top"><a href="#div-3">大学</a> </li>
    <li class="ui-state-default ui-corner-top"><a href="#div-4">中庸</a> </li>
  </ul>
  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="div-1">哀公问曰：何为则民服？ 孔子对曰：举直错诸枉，则民服；举枉错诸直，则民不服。</div>
  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-2">王曰：“寡人有疾，寡人好色。”</div>
  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-3">大学之道，在明明德，在亲民，在止于至善。</div>  
  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-4">子曰，好学近乎知。力行近乎仁。知耻近乎勇。</div></div>
</body></html>

这样，就很清楚看到jquery用了那些样式，至于最终这个标签插件要做成啥样子，就看自己喜好咯。

生活在他方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery tabs使用最简化实例

jquery tabs是个jquery的选项卡或者说是标签插件。像我这样的可怜的网站管理员，要把美工扔过来的切好图的html页面加上标签功能，再放到网站上。这里给出一个tabs插件最简单的调用方法，给所有像我这样的初学者。jquery tabs demo min $(function(){ $('#div_out').tabs(); //$('#div_
复制链接

扫一扫