jQuery EasyTabs:一款简单易用的jQuery插件,实现页面内标签切换功能
以下是使用jQuery EasyTabs插件的基本示例代码:
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery EasyTabs Example</title>
<link rel="stylesheet" href="path/to/easytabs.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.easytabs.min.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
<p>Content for tab 1.</p>
</div>
<div id="tab2">
<p>Content for tab 2.</p>
</div>
<div id="tab3">
<p>Content for tab 3.</p>
</div>
</div>
<script>
$(document).ready(function(){
$('#tabs').easytabs();
});
</script>
</body>
</html>
确保替换path/to/easytabs.css
和path/to/jquery.easytabs.min.js
为正确的文件路径。这段代码创建了一个带有三个标签的简单标签页,并在页面加载完毕后初始化了EasyTabs插件。
评论已关闭