29 Sep Let’s continue with jquery and the second part
We have the next code to start:
<html> <head> <title>Practice with jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script languajes="javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
.feature_hover {
border-left: 5px solid #f68173;
}
.feature_selected {
color: #fff;
font-weight: bold;
}
#altitude {
width: 180px;
border: 5px solid #9bb1b1;
margin: 0 0 0 15px;
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
</style>
</head> <body> <section id= "tabs"> <ul> <li><a href = "#2012-09-27" data-flight = "6" >Sep 27 </a></li> <li><a href = "#2012-09-28" data-flight = "5" >Sep 28 </a></li> <li><a href = "#2012-09-29" data-flight = "4" >Sep 29 </a></li> </ul> </section> </body> </html>
Using jquery we can access to the elements as the next examples:
to access all the ul list in the tabas
$('#tabs ul').html()
to access the first element li and its attributes
<p>$('#tabs ul li:first').html()
And to acces the only text in the links
$('#tabs ul li: first a').text() or change text instead html() is the same
And to acces it attributes in the first element li
$('#tabs ul li:first a').attr('data-flight'); or attr('href') we the code we obtain the data flight and the link address in the link.
or we can code to access the data flight the next code
$('#tabs ul li: first a').data('fligths');
The first we need to do is remove the class the before li a.active and add the class to the actual link that is clicked with the next code is enough
<script languajes="javascript">
$(document).ready(function(){
$('#tabs ul li a').click(function(e){
e.preventDefault();
$('#tabs ul li a.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
but we can refactor and do this code more beautiful and best and to do that we refactor the code below and the refactor code will looks like:
<script languajes="javascript">
jQuery(function($){
function changeTabs(e){
e.preventDefault();
$('#tabs ul li a.active').removeClass('active');
$(this).addClass('active');
}
$('#tabs ul li a').click(changeTabs);
});
to put some default link with the class active we can code the next code example using the number elment what we want
$('#tabs ul li:eq(2) a').click();
or
$('#tabs ul li a:eq(2)').click;
The both line codes before works fine
here all the code updated and works the code with default active link
here i must to paste the code in jquery/jquery.html
El bind solo
No Comments