Jquery tabs customization

Jquery tabs customization

Link :  http://amrockytechnologies.com/1/process.html

The red bullets should be clickable and it should work same the all 6 tabs (Strategy Plan.. ). when u click to red bullets it should display corresponding section  
Below is the the current working code

and reffering css:


  4. /* Navigation */
  5. nav li:first-child:after{
  6. content:'';
  7. color:red !important;
  8. }

  10. nav {
  11. margin-bottom: 5%;
  12. position: relative;
  13. border-bottom: 1px solid #bbb;
  14. }

  16. nav ul {
  17. overflow: hidden;
  18. padding-bottom: 3%;
  19. padding-top:3%;
  20. margin:0% 5%;
  21. border-bottom: 0px solid #bbb;
  22. list-style-type:none;
  23. }

  25. nav li {
  26. width:13%;
  27. float: left;
  28. margin-right: 4.35% !important;
  29. /*color:#5fb8e4 !important;*/
  30. }
  31. nav li:last-child{
  32. margin-right:0px !important;

  34. }
  35. nav li a {
  36. color: #5fb8e4;
  37. font-weight: bold;
  38. }
  39. #tabs li a.active:after,#tabs li a.active:before{
  40. color:#666 !important;
  41. content:"";
  42. }
  43. nav li a:hover,
  44. nav li a:focus,
  45. nav li a.current {
  46. color: white;
  47. }

  49. nav #indicator {
  50. position: absolute;
  51. left: 0px;
  52. bottom: -5px;
  53. width: 12px;
  54. height:12px;
  55. z-index:2;
  56. background-color: red;
  57. border-radius:40px;
  58. }

  60. #tab{
  61. margin:0% 5%;
  62. }

  64. /* Content */

  66. #content section {
  67. display: none;
  68. margin:0% 7%;
  69. }

  71. #content p {
  72. margin-bottom: 1em;
  73. max-width: 50em;
  74. line-height: 1.6;
  75. }


  78. .indicators{position: absolute;left: 0px;bottom: -5px;width: 12px;height: 12px;z-index: 1;background-color: #ffffff;border-radius: 40px;}

  2. <script type="text/javascript">
  3. var previousIndex = -1;
  5. $(function() {
  6. var left1=0;
  7. var indicator = $('#indicator'),
  8. indicatorHalfWidth = indicator.width()/2,
  9. lis = $('#tabs').children('li');
  11. $("#tabs").tabs("#content section", {
  13. effect: 'fade',
  14. fadeOutSpeed: 0,
  15. fadeInSpeed: 400,
  16. onBeforeClick: function(event, index) {
  18. var li = lis.eq(index),
  19.    newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
  20. HandleOnCLick(index);
  21.            newPos = newPos-63;
  22.   indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');
  23.   $('.indicators').eq(index).stop(true).animate({ opacity:'0' }, 600, 'easeInOutExpo');
  24.   
  25.   if(previousIndex != -1)
  26.   {
  27. $('.indicators').eq(previousIndex).stop(true).animate({ opacity:'1' }, 600, 'easeInOutExpo');
  28.   }
  29.   previousIndex = index;
  30. }
  31. });
  32. InitializeIndicators(indicatorHalfWidth);
  33. });
  36. function InitializeIndicators(indicatorHalfWidth)
  37. {
  38. for(var i=0;i<$('#tabs').children("li").length;i++)
  39. {
  40. var liObj = $('#tabs').children("li").eq(i);
  41. var newPos = liObj.position().left + (liObj.width()/2) - indicatorHalfWidth;
  42. newPos = newPos-63;
  43. $('.indicators').eq(i).css("left",(newPos)+"px");
  44. }
  45. }

  48. function HandleOnCLick(index)
  49. {
  50. var modifedCss = "#B3B3B3";
  52. for(var i=0;i<$('#tabs').find('a').length;i++)
  53. {
  54. if($('#tabs').find('a')[i].className != 'current')
  55. {
  56. $('#tabs').find('a')[i].style.color = "";
  57. }
  58. }
  60. if(index >0 )
  61. {
  62. $('#tabs').find('a')[index-1].style.color = modifedCss;
  63. }
  64. if(index<$('#tabs').find('a').length-1)
  65. {
  66. $('#tabs').find('a')[index+1].style.color = modifedCss;
  67. }
  68. }
  69. /* $( "#indicator" ).click(function() {
  70.   $("#tabs").tabs("#content section", {
  72. effect: 'fade',
  73. fadeOutSpeed: 0,
  74. fadeInSpeed: 400,
  75. onBeforeClick: function(event, index) {
  76. var li = lis.eq(index),
  77.   
  78.   newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
  79. newPos = newPos - 40;
  80.   indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');
  81.   
  82. }
  83. });
  84. });
  85. */
  86. </script>

  88. <nav>
  89. <ul id="tabs" id="tabs-1">
  90. <li><a class="current" href="#"><span style="font-size:24pt;">Strategy</span><br/> Your plan</a></li>
  91. <li><a href="#"><span style="font-size:24pt;">Develop</span> <br/> Your story</a></li>
  92. <li><a href="#"><span style="font-size:24pt;">Stylize</span><br/>Your voice</a></li>
  93. <li><a href="#"><span style="font-size:24pt;">Capture <br/></span>Your vision</a></li>
  94. <li><a href="#"><span style="font-size:24pt;">Create <br/> </span>Your experience </a></li>
  95. <li><a href="#"><span style="font-size:24pt;">Deliver <br/> </span>Your Clients </a></li>
  96. </ul>
  97. <span id="indicator"></span>
  98. <span class="indicators"></span>
  99. <span class="indicators"></span>
  100. <span class="indicators"></span>
  101. <span class="indicators"></span>
  102. <span class="indicators"></span>
  103. <span class="indicators"></span>
  104. </nav>
  106. <div id="content" style="padding-bottom:63px;margin-bottom:-11px">
  108. <section>
  109. <div class="pure-g">
  110. <div class="pure-u-1-2" style="background:#ffffff;width:61%;padding:20px;margin-right:4.2em;min-width:500px;margin-bottom:20px;">
  111. <img src="images/process/stratergy_final.gif" alt="" width="100%" style="margin-bottom:1.5em"/>
  112. <span style="text-transform:uppercase;font-family:Helvetica Neue;font-size:1.3em;">concept development</span>
  113. <p>The first phase of the project is probably the most important, and in our opinion the most fun too. During the concept development phase, we work with guidlines specified for the project and try to develop a strong core idea. Usually this is done through brainstorming sessions and workshops, In short, this stage in the process usually include:</p>
  114. <p style="margin-left:10px">Research <br/>Idea<br/>Development</p>
  117. </div>
  118. <div class="pure-u-1-2" style="background:#ffffff; width:26%;padding: 10px 10px 48px 10px;min-width:250px">
  120. <div style="text-transform:uppercase;">
  121. <p style="font-family:Helvetica Neue LT;font-size:1.4em;margin:0px !important;text-align:center">testimonials</p>
  122. <img src="images/test/sanjeev_th.jpg" alt=""  style="display:block;margin-left:auto;margin-right:auto;"/>
  123. <p style="margin:0px;text-align:center">Sanjeev Kapoor</p>
  124. <p style="margin:0px;font-size:.9em;text-transform:none;text-align:center">Owner of Scorpio Events Pvt. Ltd.</p>
  125. <p style="margin:0px;text-transform:none;padding:10px">Himayath is a Great Guy, we have used his services in past which come very Creative and out of the Box ideas from his side, we're currently using him only for all our creative and video movie need and strongly recommend other also for the same.</p>
  126. </div>
  128. </div>
  130. </div><!--pure-g-->
  131. </section>