让easyUI TAB页随页面内的按钮事件变化

最新推荐文章于 2020-01-01 18:29:45 发布

claremili

最新推荐文章于 2020-01-01 18:29:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/claremili/article/details/22876403

本文展示了一个使用EasyUI框架创建的Tab页面示例。该示例包括HTML、CSS和JavaScript三个部分，通过按钮实现各Tab页之间的切换，并演示了如何使用EasyUI提供的API禁用和启用Tab页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>easyUI tab page</title>
    
<!--以下是easyUI框架的引用地址，可根据自己的链接位置修改链接地址   -->
    <link href="clare.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css"">
	<link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="easyUI/demo.css">
	<script type="text/javascript" src="easyUI/jquery.min.js"></script>
	<script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
	
	
    <script>
	$(function(){
		$("#tabs").tabs("disableTab","css");
		$("#tabs").tabs("disableTab","js");
	});

	function nextBQ(){
		$("#tabs").tabs("enableTab", "css");
		$("#tabs").tabs("select", "css");
	}

	function purHZ(){
		$("#tabs").tabs("enableTab", "html");
		$("#tabs").tabs("select", "html");
	}

	function nextHZ(){
		$("#tabs").tabs("enableTab", "js");
		$("#tabs").tabs("select", "js");
	}

	function purGJ(){
		$("#tabs").tabs("enableTab", "css");
		$("#tabs").tabs("select", "css");
	}

	function nextSubmit(){
		alert("确定提交");
	}
	</script>
    
    
    
    
    <style type="text/css">
	.kk1,.kk2 {
		margin:0;
		padding:0;
		display:inline-block;
		position:relative;
		width:50px;
		height:25px;
		background:#D7EBFF;
		text-align:center;
		line-height:25px;
	}
	.kk1 {
		left:550px;
	}
	.kk2 {
		left:560px;	
	}
	.kk1 a, .kk2 a {
    cursor:pointer;
	width:50px;
	height:25px;
	}
	</style>
    
</head>
<body>
    
   
    <div class="easyui-tabs" style="width:700px;height:550px" id="tabs">
        <div title="html" style="padding:10px" id="html">
          <div class="kk2"><a onclick="nextBQ();">下一步</a></div>
          <p>This is html</p>
        </div>
        <div title="css" style="padding:10px" id="css">
          <div class="kk1"><a onclick="purHZ();">上一步</a></div>
          <div class="kk2"><a onclick="nextHZ();">下一步</a></div>
          <p>This is css</p>
        </div>
        <div title="js" style="padding:10px" id="js">
          <div class="kk1"><a onclick="purGJ();">上一步</a></div>
          <div class="kk2"><a onclick="nextSubmit();">确定</a></div>
          <p>This is js</p>
        </div>
    </div>
</body>
</html>