srcminiFramework7可以帮助你使用以下JavaScript方法切换或显示选项卡。
句法：
myApp.showTab(tab)参数说明：
选项卡：选项卡是用于打开选项卡的必需HTML元素或字符串。
注意：如果选项卡已更改, 则此方法返回true, 否则返回false。
例
让我们以一个示例来演示如何使用Framework7中的JavaScript来显示show选项卡：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Show Tabs Events </title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Tabs Events</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "buttons-row">
<a href = "#tab1" class = "tab-link active button">Tab 1</a>
<a href = "#tab2" class = "tab-link button">Tab 2</a>
<a href = "#tab3" class = "tab-link button">Tab 3</a>
</div>
</div>
<div class = "tabs">
<div id = "tab1" class = "tab active">
<div class = "content-block">
<p>This is tab 1 content</p>
<p> <a href = "#" class = "show-tab-2">Show Tab 2</a></p>
<p>srcmini offers Industrial and Summer Training on
Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and many more technologies in Delhi/NCR, India.</p>
</div>
</div>
<div id = "tab2" class = "tab">
<div class = "content-block">
<p>This is tab 2 content</p>
<p> <a href = "#" class = "show-tab-3">Show Tab 3</a></p>
<p>C programming language was developed in 1972 by Dennis
Ritchie at bell laboratories of AT&T (American Telephone & Telegraph), located in U.S.A.</p>
</div>
</div>
<div id = "tab3" class = "tab">
<div class = "content-block">
<p>This is tab 3 content</p>
<p> <a href = "#" class = "show-tab-1">Show Tab 1</a></p>
<p>Android is a software package and linux based operating
system for mobile devices such as tablet computers and smartphones.
It is developed by Google and later the OHA (Open Handset Alliance).
Java language is mainly used to write the android code even though other languages can be used.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
$$('.show-tab-1').on('click', function () {
myApp.showTab('#tab1');
});
$$('.show-tab-2').on('click', function () {
myApp.showTab('#tab2');
});
$$('.show-tab-3').on('click', function () {
myApp.showTab('#tab3');
});
</script>
</body>
</html>立即测试
评论前必须登录！
注册