Wednesday, May 23, 2012

Monday, January 31, 2011

Passing links to the anchor using jquery

var tab1Links=["home.html", "abt.html", "services.html", "contact.html"]
$(document).ready(function(){
    $(".hovfn li").hover(function(){
    $(this).addClass("hovr");
}, function(){
    $(this).removeClass("hovr")
    });
    $(".hovfn a").each(function(x) {
    $(".hovfn a:eq("+x+")").attr("href",tab1Links[x] );
});
    var i=1;
   
$("li").each(function(i){
    i++;
    $(this).prepend(i+")"+"     ");
});
    });
<ul class="hovfn">
<li class=""><a href="#">home</a></li>
<li class=""><a href="#">about us</a></li>
<li class=""><a href="#">services</a></li>
<li class=""><a href="#">contact</a></li>
</ul>

Passing links to the anchor

Insert this script in head section
<style type="text/css">
.hovfn{margin:0 auto; padding:0; list-style:none}
.hovfn li{float:left; padding:5px 10px;}
.hovfn li.hovr{background-color:#ccc}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var tab1Links=["home.html", "abt.html", "services.html", "contact.html"]
$(document).ready(function(){
    $(".hovfn li").hover(function(){
    $(this).addClass("hovr");
}, function(){
    $(this).removeClass("hovr")
    });
    $(".hovfn a").each(function(x) {
    $(".hovfn a:eq("+x+")").attr("href",tab1Links[x] );
});
    var i=1;
   
$("li").each(function(i){
    i++;
    $(this).prepend(i+")"+"&nbsp; &nbsp; &nbsp;");
});
    });
</script>

After that the html strutter  for sample is like this

<ul class="hovfn">
<li class=""><a href="#">home</a></li>
<li class=""><a href="#">about us</a></li>
<li class=""><a href="#">services</a></li>
<li class=""><a href="#">contact</a></li>
</ul>