سوال: مشکل با جاوا اسکریپت برای داینامیک کردن منو

ساخت وبلاگ

آخرین مطالب

امکانات وب

سوال: مشکل با جاوا اسکریپت برای داینامیک کردن منو

کد فوق برای صفحات html معمولی بصورت زیر میشه - شما 3 نوع کد دارید - کدهای html - CSS و JAVASCRIPT
یک پوشه بسازید با نام مثلا example - در داخل این پوشه 2 پوشه دیگه با نام های css و js بسازید -
اول یک فایل html بسازید و در پوشه example که در بالا ایجاد کردید ذخیره نمائید - کد زیر رو بصورت کامل در این فایل html ساخته شده Copy & paste کنید - این شد صفحه html شما
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
<div id="sections">
<div id="section1" class="section">
I'm section 1
</div>
<div id="section2" class="section">
I'm section 2
</div>
<div id="section3" class="section">
I'm section 3
</div>
<div id="section4" class="section">
I'm section 4
</div>
<div id="section5" class="section">
I'm section 5
</div>
</div>
</body>
</html>

حالا یک فایل CSS با نام style بسازید و در پوشه css ساخته شده در بالا ذخیره کنید - کد زیر رو درون اون Paste کنید - این شد فایل CSS شما

#navigation {
position: fixed;
top: 0;
left: 250px;
}
#sections {
position: absolute;
top: 0;
left: 400px;
}
.section {
height: 200px;
margin: 10px;
padding: 10px;
border: 1px dashed black;
}
#section5 {
height: 1000px;
}
.active {
background: red;
}

حالا یک فایل جاوااسکریپت با نام script بسازید و با پسوند js در پوشه js ساخته شده در بالا ذخیره کنید و کد زیر رو مشابه با بالا Copy & paste کنید - این شد کدهای جاوااسکریپت شما

window.onload=function(){
$(document).ready(function() {
var $navigationLinks = $('#navigation > ul > li > a');
var $sections = $(".section");
var $sectionsReversed = $($(".section").get().reverse());
var sectionIdTonavigationLink = {};

$sections.each(function() {
sectionIdTonavigationLink[$(this).attr('id')] = $('#navigation > ul > li > a[href=#' + $(this).attr('id') + ']');
});
function setnavlinks() {
var scrollPosition = $(window).scrollTop();
$sectionsReversed.each(function() {
var currentSection = $(this);
var sectionTop = currentSection.offset().top;

if (scrollPosition >= sectionTop) {
var id = currentSection.attr('id');
var $navigationLink = sectionIdTonavigationLink[id];
if (!$navigationLink.hasClass('active')) {
$navigationLinks.removeClass('active');
$navigationLink.addClass('active');
}
return false;
}
});
}
$(window).scroll(function() {
setnavlinks();
});
});
}

برای اینکه کدهای بالا درست کار کنن شما نیاز به فایل Jquery دارید که لینک اون رو بصورت

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

دادم - لذا نیاز دارید که برای تست کدهای بالا به اینترنت متصل باشید در غیر اینصورت فایل جی کوئری رو دانلود کنید و به پوشه js منتقل نمائید و خط بالا رو برای خودتون اصلاح کنید. الان به رفتن به هر بخش زیر منوی مربوط active میشه و رنگش فرق می کنه

قالب وردپرس هم شبیه به همین فایل html معمولی میشه

برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : نویسنده : محمد رضا جوادیان programers بازدید : 177 تاريخ : پنجشنبه 29 تير 1396 ساعت: 19:34

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه