مسج تسليط الضوء على رابط عند النقر عليها
سؤال
كيف يمكنني استخدام مسج لتسليط الضوء على رابط عند النقر على ذلك ؟
على سبيل المثال, عندما اضغط على الرابط class1_1 أنا تريد أن تجعل من هذا الرابط الأحمر (أو لون آخر).
شفرة جافا سكريبت من هنا:
<script type="text/javascript">
$(function(){
$("#menu li").each(function(){
$(this).click(function(event){
var ul=$(this).children("ul")
var span = $(this).children("span")
if(ul.html()!=null)
{
if(ul.css("display")=="none")
{
ul.css("display","block");
span.addClass("up")
}else
{
ul.css("display","none")
span.removeClass("up")
}
event.stopPropagation();
}else
{
event.stopPropagation();
}
});
});
return false;
});
</script>
الكود هنا:
<ul id="menu">
<li class="title"><span>class1 </span>
<ul>
<li><a href="">class1_1</a></li>
<li><a href="">class1_2</a></li>
</ul>
</li>
<li class="title"><span>class2</span>
<ul>
<li><span>class2_1</span>
<ul>
<li><a href="">class2_1_1</a></li>
<li><a href="">class2_1_1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
ربما لا أستطيع تفسير سؤالي بوضوح ، أعني آخر onclick رابط تجعل
اللون الأحمر و آخر مجموعة روابط إلى هناك اللون الافتراضي
المحلول 5
<script type = "text/javascript" >
$(function() {
$("#menu li").each(function() {
$(this).click(function(event) {
$("#menu li").removeClass("high");
$(this).addClass("high");
var ul = $(this).children("ul")
var span = $(this).children("span")
if (ul.html() != null) {
if (ul.css("display") == "none") {
ul.css("display", "block");
span.addClass("up")
} else {
ul.css("display", "none") span.removeClass("up")
}
event.stopPropagation();
} else {
event.stopPropagation();
}
});
});
return false;
});
</script>
<style>
.high{color:red}
</style>
نصائح أخرى
ومن الممكن استخدام CSS، لا مسج المطلوبة:
وتسليط الضوء على:
a:active {
background-color: #FF0000;
}
وتغيير لون الرابط:
a:active {
color: #FF0000;
}
وتحرير: ردا على تعليقك ... وإذا صلاتك لا توجيه المتصفح إلى صفحة أخرى، يمكنك استخدام <لأ href = "https://stackoverflow.com/questions/813046/jquery-highlight-the- الارتباط عندما تم النقر عليها / 813083 # 813083 "> مايك روبنسون الجواب لتحقيق نفس التأثير دون مغادرة الصفحة وبدون تغيير لون الخلفية الافتراضي و onblur.
وأعتقد أن هذا ينبغي أن نفعل ذلك، على الرغم من أنني لم يكن لديك مسج على يد في الوقت الحالي. يفترض 'حتى' هي فئة التي تجعل الارتباط الأحمر الخاص بك:
$("ul#menu a").click(function(){
$(this).addClass('up');
});
هذا يجب أن تعمل:
جافا سكريبت:
$(function(){
$('.class1').click(function() {
$(this).toggleClass('active1');
});
});
CSS:
a.class1 { color: red; }
a.active1 { color: blue; }
HTML:
<a href="#" class="class1">some text</a>
من الأفضل استخدام toggleClass (2 في 1) بدلا من addClass/الإعلانات.
وأود أن أوصي http://plugins.jquery.com/project/color المساعد jquery.color. وسوف تسمح لك لتحريك اللون على كل أنواع العناصر أتش تي أم أل.
وجافا سكريبت:
$('.link').click(function() {
if (!$(this).hasClass('hi')) {
// If this link is not already highlighted, highlight it and make
// sure other links of class .link are not highlighted.
$('.hi').removeClass('hi');
$(this).addClass('hi');
}
});
والمغلق:
a.hi { color: red; }
وأتش تي أم أل:
<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>
يمكنك أن تفعل ذلك باستخدام CSS الدرجة الزائفة نشط.وتضيف نمط خاص تنشيط عنصر.
على سبيل المثال يمكنك أن تفعل هذا:
a: active { color: red; }
كن حذرا, a:active يجب أن يأتي بعد:تحوم في تعريف CSS من أجل أن تكون فعالة!!