Царь Леонид
07.11.2013, 12:39
День добрый, учу jquery, в целях самообучения сделал небольшой скрипт, в принципе все работает как надо, но мне кажется получилось как-то убого в плане того, что можно было написать покороче и пояснее, профи, жду вашей критики
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#first_tag").click(function()
{
if($(".second_div, .third_div, .four_div").lenght != 0){
$(".second_div, .third_div, .four_div").hide();
}
$(".first_div").fadeIn(600);
});
$("#second_tag").click(function()
{
if($(".first_div, .third_div, .four_div").lenght != 0){
$(".first_div, .third_div, .four_div").hide();
}
$(".second_div").fadeIn(600);
});
$("#third_tag").click(function()
{
if($(".first_div, .second_div, .four_div").lenght != 0){
$(".first_div, .second_div, .four_div").hide();
}
$(".third_div").fadeIn(600);
});
$("#four_tag").click(function()
{
if($(".first_div, .second_div, .third_div").lenght != 0){
$(".first_div, .second_div, .third_div").hide();
}
$(".four_div").fadeIn(600);
});
});
</script>
<ul>
<li><a href="#" id="first_tag">Первый</a></li>
<li><a href="#" id="second_tag">Второй</a></li>
<li><a href="#" id="third_tag">Третий</a></li>
<li><a href="#" id="four_tag">Четвертый</a></li>
</ul>
<div class="first_div">
<h3>Первый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="second_div">
<h3>Второй див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="third_div">
<h3>Третий див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="four_div">
<h3>Четвертый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<style>
ul li{display:inline;padding-left:20px;}
div.first_div{background-color:#ccc;height:200px;margin-top:20px;}
div.second_div, .third_div, .four_div{background-color:#ccc;display:none;height:200px;margin-top:20px;}
</style>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#first_tag").click(function()
{
if($(".second_div, .third_div, .four_div").lenght != 0){
$(".second_div, .third_div, .four_div").hide();
}
$(".first_div").fadeIn(600);
});
$("#second_tag").click(function()
{
if($(".first_div, .third_div, .four_div").lenght != 0){
$(".first_div, .third_div, .four_div").hide();
}
$(".second_div").fadeIn(600);
});
$("#third_tag").click(function()
{
if($(".first_div, .second_div, .four_div").lenght != 0){
$(".first_div, .second_div, .four_div").hide();
}
$(".third_div").fadeIn(600);
});
$("#four_tag").click(function()
{
if($(".first_div, .second_div, .third_div").lenght != 0){
$(".first_div, .second_div, .third_div").hide();
}
$(".four_div").fadeIn(600);
});
});
</script>
<ul>
<li><a href="#" id="first_tag">Первый</a></li>
<li><a href="#" id="second_tag">Второй</a></li>
<li><a href="#" id="third_tag">Третий</a></li>
<li><a href="#" id="four_tag">Четвертый</a></li>
</ul>
<div class="first_div">
<h3>Первый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="second_div">
<h3>Второй див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="third_div">
<h3>Третий див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<div class="four_div">
<h3>Четвертый див</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
</div>
<style>
ul li{display:inline;padding-left:20px;}
div.first_div{background-color:#ccc;height:200px;margin-top:20px;}
div.second_div, .third_div, .four_div{background-color:#ccc;display:none;height:200px;margin-top:20px;}
</style>
</body>
</html>