السلام عليكم،
في البداية عند تحميل الصفحة يتم اظهار الديفين الرئبسيين مع اختيار العنوان h3 رقم 1 في كليهما واظهاره بلون مختلف.
http://majallati.comli.com/test/div3hover/d3h8.php
المشكلة :
اريد عندما يتم تحريك الفارة فوق العنوان الثاني في div1 يتم اختيار h3 الثاني مع عدم تغيير وضعية العنوان الاول في div2 والمحافظة عليه.
ولكن مشكلتي انا ان العنوان الاول في div2 يتغير حاله الى not selected .
كيف يمكن لي حل هذه المشكلة بكود جي كويري الموجود في الصفحة :
كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>تبويب عمودي</title>
<meta name="description" lang="fr" content="تجريب تبويب عمودي بالجي كويري" />
<style type="text/css" media="screen">
body {
font-size: 90%;
font-family: arial, helvetica, sans-serif;
}
h1 {text-align: center; color: #f00;}
h3 {
text-align: left;
color: #f00;
font-size: 12px;
}
.articles {
position : relative;
border: 1px solid #000;
width: 352px; height : 123px;
}
.articles h3, .articles h3 a {color: #ebfff3; background-color: #36425a;}
/*.hasJS .articles {min-height:200px;}*/
.hasJS .articles h3 {
cursor: pointer;
background-color: #36425a;
margin: 0;
padding: 5px;
border-bottom: #fff 1px solid;
border-right: #fff 1px solid;
width:190px;
height:30px;
}
.hasJS .articles h3.selected {
background-color: #7385a3;
border-right: #fff 1px solid;
}
.hasJS .articles div div.show_img {position: absolute; top: 0; right: 0; left: 196px; }
.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
.imag { width:150px; height:122px;}
a:link, a:visited, a:active{text-decoration: none;color: #333333;}
</style>
<script type="text/javascript">
document.documentElement.className+=" hasJS";
</script>
</head>
<body>
<h1>التبويب العمودي</h1>
<h2>سلسلة من h3 بتبويب افقي</h2>
<div class= "articles" id="articles_1"">
<div class="article">
<h3 class="selected"><a href="#">الكوريتان تتفقان على إجراء مباحثات بشأن لم شمل العائلات</a></h3>
<div class="show_img">
<img class="imag"src="news_1.jpg" alt="الصورة 1" />
</div>
</div>
<div class="article">
<h3><a href="#">ساحل العاج: كوليبالي يلقى حتفه على يد "حلفاء أمس"</a></h3>
<div>
<img class="imag" src="news_2.jpg" alt="الصورة 2" />
</div>
</div>
<div class="article">
<h3><a href="#">باحثون كنديون يخترعون هاتفا ورقيا جديدا</a></h3>
<div>
<img class="imag" src="news_3.jpg" alt="الصورة 3" />
</div>
</div>
</div>
<br /><br />
<div class= "articles" id="articles_2">
<div class="article">
<h3 class="selected"><a href="#">الكوريتان تتفقان على إجراء مباحثات بشأن لم شمل العائلات</a></h3>
<div class="show_img">
<img class="imag"src="news_1.jpg" alt="الصورة 1" />
</div>
</div>
<div class="article">
<h3><a href="#">ساحل العاج: كوليبالي يلقى حتفه على يد "حلفاء أمس"</a></h3>
<div>
<img class="imag" src="news_2.jpg" alt="الصورة 2" />
</div>
</div>
<div class="article">
<h3><a href="#">باحثون كنديون يخترعون هاتفا ورقيا جديدا</a></h3>
<div>
<img class="imag" src="news_3.jpg" alt="الصورة 3" />
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready( function () {
//tabindex للعمل بلوحة المفاتيح
$(".articles h3").attr("tabindex", "0");
$(".articles h3").focus (
function () {
//اشياء نقوم بها عند الحدث focus فوق h3
$(".articles div.show_img").removeClass("show_img");
$(".articles h3.selected").removeClass("selected");
$(this).next("div").addClass("show_img");
$(this).addClass("selected");
}
);
//
//
$('.articles').hover(function(){
var num = $(this).attr('id').substr(9); // نهاية الـ id ابتداء من الحرف التاسع
if ( /^[0-9]{1,4}$/.test(num) ) { // يتم اكمال العملية الا اذا كان لدينا رقم
var $articles = $('articles_' + num); // نقوم باسترجاع DIV للمنطقة المؤشر عليها
// نبدأ العمل
$articles.focus();
// معالجة الـ hover على h3 :
$("div.article h3").hover(
function () {
//اشياء نقوم بها اثناء الحدث over على h3
$(".articles div.show_img").removeClass("show_img");
$(".articles h3.selected").removeClass("selected");
$(this).next("div").addClass("show_img");
$(this).addClass("selected");
},
function () {
//out : الاشياء التي نقوم بها اثناء خروج المؤشر من المنطقة
h3
}
);
}
}
);
//
});
</script>
</body>
</html>
شكرا مسبقاً.
المواضيع المشابهه 
