Resimleri geçici olarak oradan aldım
Amacım bu şekilde resimli bir tab-menü oluşturmak. Tüm .js dosyalarını aldım fakat tabların üzerine tıkladığımda hiçbir değişiklik olmuyor.
index dosyasındaki kodlar bu şekilde:
<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Prograf</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async src="//statse.webtrendslive.com/dcs0l1vfkvz5bd48a1i8ttnl0_1y9z/wtid.js?callback=Webtrends.dcss.dcsobj_0.dcsGetIdCallback"></script><script type="text/javascript" src="/Scripts/all_links_tracking.js"></script><script type="text/javascript" src="//s.webtrends.com/js/webtrends.hm.js"></script><script async src="/Scripts/webtrends.js"></script><script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="/Scripts/base.js" type="text/javascript"></script>
<script src="/Scripts/tracking.js" type="text/javascript"></script>
<meta name="description" content="Official Prograf patient website. View Important Safety Information and Boxed WARNINGS.">
</head>
<body>
<div class="modal-overlay">
<div class="modal-wrapper">
<div class="center-pin pin"></div>
<div class="right-close close"></div>
<div class="modal-center">
<div class="modal-content c-01" style="display: none;">
<p>The website you are following this link to is neither owned nor controlled by Astellas. Astellas is not responsible for the content or services on this site.</p>
<div class="center-b">
<a href="http://www.transplantmedsavings.com" class="btn warning">Continue</a>
<a class="btn cancel">Cancel</a>
</div>
</div>
<div class="modal-content c-02" style="display: none;">
<p>The site you are about to visit will allow you to learn more about the Prograf Copay Card and find out how you can enroll and receive yours (some restrictions apply). </p>
<div class="center-b">
<a href="http://www.astellasaccess.com/home/pat/prograf/out-of-pocket_support/card.aspx" class="btn warning">Continue</a>
<a href="#" class="btn cancel">Cancel</a>
</div>
</div>
<div class="modal-content c-03" style="display: none;">
<p>The website you are following this link to is neither owned nor controlled by Astellas. Astellas is not responsible for the content or services on this site.</p>
<div class="center-b">
<a href="http://www.fda.gov/medwatch" class="btn warning">Continue</a>
<a href="#" class="btn cancel">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<nav>
<div class="container">
<div class="logo"><img src="../../Content/image/prograf_logo.png"></div>
<div class="links">
<ul>
<li><a href="#safety">Important Safety Infomation</a></li>
<li><a href="http://www.astellas.us/docs/prograf.pdf" target="_blank">Prescribing Information</a></li>
<li><a href="/Docs/13H057-PRG-WPI-PPI.pdf">Patient Information</a></li>
</ul>
</div><!--links-->
</div><!--container-->
</nav>
<div class="container">
<div class="wrapper">
<div class="row">
<div class="span8">
<div class="tabs">
<div class="real-text">
<div class="t1" style="display: block;">
<h1>Prograf is</h1>
<p>a prescription medicine used with other medicines to help prevent organ rejection in people who have had a kidney, liver, or heart transplant.</p>
</div>
<div class="t2" style="display: none;">
<h1>Prograf Copay<br> Card Program</h1>
<p>You pay $10 for each refill of Prograf<sup>®</sup> (tacrolimus) immediate-release capsules for a total savings of up to $200 per month, per individual prescription strength<sup>a</sup>.</p>
</div>
<div class="t3" style="display: none;">
<h1>Astellas Cares Program</h1>
<p>Astellas Cares is for healthcare professionals, patients, or partners, and is your one-stop source for:</p>
<ul class="bullet">
<li>Medical information</li>
<li>Customer service inquiries</li>
<li>Patient education resources and tools</li>
<li>Copay card enrollment</li>
<li>Reimbursement support</li>
<li>Pharmacy product ordering</li>
</ul>
</div>
</div>
<div class="span2 enroll" style="display: none;">
<br>
<button class="btn warning cc-01">Enroll Now</button>
<br>
<a href="http://www.astellasaccess.com/home/pat/prograf/out-of-pocket_support/card.aspx" target="_blank" class="btn">Learn More</a>
</div>
<div class="tab-view">
<a href="#tab1" class="tab_1 active" style="left: 40px; z-index: 5;"><!--About prograf--></a>
<a href="#tab2" class="tab_2 active" style="top: 12px; left: 185px; z-index: 5;"><!--CoPay Card--></a>
<a href="#tab3" class="tab_3 active" style="top: 11px; left: 340px; z-index: 5;"><!--ASTELLAS Cares--></a>
<div class="wrap-tab" style="background-image: url(http://prograf.com/Content/image/aboutprograf.png); background-position: initial initial; background-repeat: no-repeat no-repeat;">
<div class="tab-c">
</div>
</div>
</div>
<div class="wrap-tab" style="background-image: url(http://prograf.com/Content/image/copay.png); background-position: initial initial; background-repeat: no-repeat no-repeat;">
<div class="tab-c">
</div>
</div>
</div><!--tabs-->
</div><!--span7-->
</body></html>