Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 12, 2015 18:35
Show Gist options
  • Save anonymous/12a196928fe41473bc8c to your computer and use it in GitHub Desktop.
Save anonymous/12a196928fe41473bc8c to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI Tabs - Open on mouseover // source http://jsbin.com/qatafi/3
Raw
index.html
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Open on mouseover</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Die Regisseurin</a></li>
<li><a href="#tabs-2">Die Juristin</a></li>
<li><a href="#tabs-3">Der Lehrer</a></li>
</ul>
<div id="tabs-1">
<h1> 1. Die Regisseurin:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=51.4,74.42" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 1:</h1>
<h2> Erläutere worin für die Regisseurin ein Problem besteht.</h2>
<p>
</div>
<div id="tabs-2">
<h1> 2. Die Juristin:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=74.5,89" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 2:</h1>
<h2> Zeige auf zwischen welchen Positionen die Rechtsanwältin einen Konflikt sieht.</h2>
</div>
<div id="tabs-3">
<h1> 3. Der Lehrer:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=104,111" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 3:</h1>
<h2> Worüber regt sich der Lehrer auf? Hat er recht?</h2>
</div>
</div>
<p>
Videoquelle:
<a href="http://www.zdf.de/der-fernsehfilm-der-woche/die-neue-fernsehfilm-der-woche-drama-religionsfreiheit-40406640.html" target="_blank">ZDF Fernsehfilm der Woche "Die Neue"</a>.
</p>
<script id="jsbin-source-html" type="text/html"><head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Open on mouseover</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"><\/script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
<\/script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Die Regisseurin</a></li>
<li><a href="#tabs-2">Die Juristin</a></li>
<li><a href="#tabs-3">Der Lehrer</a></li>
</ul>
<div id="tabs-1">
<h1> 1. Die Regisseurin:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=51.4,74.42" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 1:</h1>
<h2> Erläutere worin für die Regisseurin ein Problem besteht.</h2>
<p>
</div>
<div id="tabs-2">
<h1> 2. Die Juristin:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=74.5,89" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 2:</h1>
<h2> Zeige auf zwischen welchen Positionen die Rechtsanwältin einen Konflikt sieht.</h2>
</div>
<div id="tabs-3">
<h1> 3. Der Lehrer:</h1>
<p> Starte den Film. Am Ende der Sequenz stoppt er automatisch. Bearbeite dann die nächste Aufgabe.<p>
<video width="100%" controls>
<source src="http://nrodl.zdf.de/none/zdf/15/10/151013_neue_schulfrieden_vj_ps_fdw_2256k_p14v11.mp4#t=104,111" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1> Aufgabe 3:</h1>
<h2> Worüber regt sich der Lehrer auf? Hat er recht?</h2>
</div>
</div>
<p>
Videoquelle:
<a href="http://www.zdf.de/der-fernsehfilm-der-woche/die-neue-fernsehfilm-der-woche-drama-religionsfreiheit-40406640.html" target="_blank">ZDF Fernsehfilm der Woche "Die Neue"</a>.
</p>
</body>
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment