Ausführliche Erläuterung der Methode zum Wechseln der Tabs in JQuery-js-Tutorial-php.cn

Ausführliche Erläuterung der Methode zum Wechseln der Tabs in JQuery

php中世界最好的语言

Freigeben： 2018-04-26 16:52:00

Original

2188 Leute haben es durchsucht

Dieses Mal werde ich Ihnen ausführlich erklären, wie Sie Tabs in JQuery wechseln. Was sind die Vorsichtsmaßnahmen für den Tab-Wechsel in JQuery?

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<!-- 注意引进的文件顺序，你做的没有效果也许就是因为文件引进顺序不对！ -->
<script type="text/javascript" src="<%=path %>/js/jquery-1.2.6.js"></script>
<script src="<%=path%>/js/ui.core.js" type="text/javascript"></script>
<link href="<%=path%>/css/ui.tabs.css" rel="stylesheet" type="text/css" />
<script src="<%=path%>/js/ui.tabs.js" type="text/javascript"></script>
<style type="text/css">
code {
    font-family: "Courier New", Courier, monospace;
}
</style>
<script type="text/javascript">
 $(function() {
  alert(1);
  $(&#39;#rotate > ul&#39;).tabs({ fx: { opacity: &#39;toggle&#39; },selected:0}).tabs(&#39;rotate&#39;, 500000);
 });
</script>  
</head>
<body>
<hr size="10" color="red"/>
<H1>Rotating UI Tabs example</H1>
<p id="rotate">
<ul>
 <li><a href="#p1"><span>新闻</span></a></li>
 <li><a href="#p2"><span>论坛</span></a></li>
  <li><a href="#p3"><span>博客</span></a></li>
</ul>
<p id="p1"><h4>p1</h4>此处放置测试用的显示内容，自动切换tabs选项卡，自动切换tabs选项卡，自动切换tabs选项卡。
自动切换tabs选项卡，自动切换tabs选项卡，自动切换tabs选项卡。自动切换tabs选项卡。</p>
<p id="p2"><h4>p2</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</p>
<p id="p3"><h4>p3</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schritte zum Implementieren des jQuery-Tab-Switching-Spezialeffekts

jQuery implementiert das Tab-Schiebemenü mit Slide-Effekt

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Methode zum Wechseln der Tabs in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!