i creating tab menu using unordered list <ul>.i have 7 tabs.initially first tab active , should have color , other 6 tab inactive must in color. wrote jquery make <li> set class active when tab clicked. jquery file is
$(document).ready(function(){ $("ul#tabs li").click(function(e){ if (!$(this).hasclass("active")) { var tabnum = $(this).index(); var nthchild = tabnum+1; $("ul#tabs li.active").removeclass("active"); $(this).addclass("active"); $("ul#tab li.active").removeclass("active"); $("ul#tab li:nth-child("+nthchild+")").addclass("active"); } }); }); and html file is
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/modernizr.js"></script> <script src="js/tabs.js"></script> <style> #tab-menu ul li { background : #d9dada; background : rgba(217, 218, 218, 1); top:1px; list-style: none; position: relative; float: left; width:68px; height: 74px; text-align: center; line-height: 50px; margin-right: 15px; border-width: 1px 1px 0 1px; border-radius : 7px 7px 7px 0px; -moz-border-radius : 7px 7px 7px 0px; -webkit-border-radius : 7px 7px 7px 0px; } #tab-content { background : -moz-linear-gradient(1613.26% -4814.7% -90deg,rgba(202, 188, 160, 1) 0%,rgba(217, 206, 184, 1) 38.04%,rgba(229, 221, 209, 1) 74.9%,rgba(217, 206, 186, 1) 87.84%,rgba(205, 190, 163, 1) 100%); background : -webkit-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); background : -webkit-gradient(linear,1613.26% -4814.7% ,1613.26% -1286.93% ,color-stop(0,rgba(202, 188, 160, 1) ),color-stop(0.3804,rgba(217, 206, 184, 1) ),color-stop(0.749,rgba(229, 221, 209, 1) ),color-stop(0.8784,rgba(217, 206, 186, 1) ),color-stop(1,rgba(205, 190, 163, 1) )); background : -o-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); background : -ms-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#cabca0', endcolorstr='#cdbea3' ,gradienttype=0)"; background : linear-gradient(180deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#cabca0',endcolorstr='#cdbea3' , gradienttype=0); width:1000px; height: 500px; margin-left:40px; padding: 10px 10px 10px 10px; clear:both; background-position:50px 0px; border-radius : 7px 7px 10px 0px; -moz-border-radius : 7px 7px 10px 0px; -webkit-border-radius : 2px 7px 10px 0px; } .active { background : -moz-linear-gradient(1613.26% -4814.7% -90deg,rgba(202, 188, 160, 1) 0%,rgba(217, 206, 184, 1) 38.04%,rgba(229, 221, 209, 1) 74.9%,rgba(217, 206, 186, 1) 87.84%,rgba(205, 190, 163, 1) 100%); background : -webkit-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); background : -webkit-gradient(linear,1613.26% -4814.7% ,1613.26% -1286.93% ,color-stop(0,rgba(202, 188, 160, 1) ),color-stop(0.3804,rgba(217, 206, 184, 1) ),color-stop(0.749,rgba(229, 221, 209, 1) ),color-stop(0.8784,rgba(217, 206, 186, 1) ),color-stop(1,rgba(205, 190, 163, 1) )); background : -o-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); background : -ms-linear-gradient(-90deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#cabca0', endcolorstr='#cdbea3' ,gradienttype=0)"; background : linear-gradient(180deg, rgba(202, 188, 160, 1) 0%, rgba(217, 206, 184, 1) 38.04%, rgba(229, 221, 209, 1) 74.9%, rgba(217, 206, 186, 1) 87.84%, rgba(205, 190, 163, 1) 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#cabca0',endcolorstr='#cdbea3' , gradienttype=0); } </style> </head> <body> <div id="tab-menu" class="tab-menu"> <ul id="tabs"> <li class="active"><a href="#"><img src="01.png" height="70" width="50"/></a></li> <li><a href="#"><img src="02.png" height="70" width="50"/></a></li> <li><a href="#"><img src="04.png" height="70" width="50"/></a></li> <li><a href="#"><img src="06.png" height="70" width="50"/></a></li> <li><a href="#"><img src="07.png" height="70" width="50"/></a></li> <li><a href="#"><img src="08.png" height="70" width="50"/></a></li> <li><a href="#"><img src="09.png" height="70" width="50"/></a></li> </ul> </div> <div id="tab-content"> </div> </body> </html> here have wrote css active class. button click action works fine need set tabs inactive in different color. can me code?
Comments
Post a Comment