I am a sharepoint admin trying to create a landing page for my staff and I want to use jquery tabs. I am very new to this stuff, and am trying my best. Here is the situation.
- I am using Sharepoint 2010
- I am using Easytabs for main navigation
- In each CEWP I would to place jquery tabs for various content (probably 4 instances)
- The first instance works fine, everything after that has been a problem.
- Biggest problem is that my other instances the other tabs do not work and all the content is displayed in the first panel.
Here is my code. Tried changing from ID to class and copied some script from an earlier jquery forum ( https://groups.google.com/forum/#!topic/jquery-ui/JxKuwyrdC9A )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</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();
});
</script>
</head>
<body>
<div class="tabs">
<ul>
<li><a href="#tabs-anes1">Main Links</a></li>
<li><a href="#tabs-anes2">Anesthesia Guidelines</a></li>
<li><a href="#tabs-anes3">Regional Anesthesia</a></li>
<li><a href="#tabs-anes4">TeamSTEPPS</a></li>
<li><a href="#tabs-anes5">Announcements</a></li>
<li><a href="#tabs-anes6">Notes</a></li>
</ul>
<div class="tabs-anes1">
<p>tabs1.</p>
</div>
<div class="tabs-anes2">
<p>tabs2.</p>
</div>
<div class="tabs-anes3">
<p>tabs3</p>
</div>
<div class="tabs-anes4">
<p>tabs4.</p>
</div>
<div class="tabs-anes5">
<p>tabs5.</p>
</div>
<div class="tabs-anes6">
<p>tabs6.</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$(".tabs").tabs();
});
</script>
What am I doing wrong here?
I'm not sure why the second
tabsfunction that uses the class is outside of thehtmltag but you can always try using a different ID on each instance.