Li elementi klikda tanlanmagan

Natijada oxirida xatcho'p yorlig'i sifatida ishlovchi Html.ActionLink bilan li elementini yaratdim. Men hover uchun CSS-ga murojaat qildim va u juda yaxshi ishlaydi.

Endi men uni bosganimda li qutisini ta'kidlashim kerak. Men jQuery-ni ishlatganman, lekin bu ishlamayapti. Men xatolarni tuzatuvchi asboblarni tekshirdim va u erda xato bo'lmaydi. Shuning uchun menimcha, bu sinfga tatbiq etilmaydi. Muammo nima ekanini bilmayman. Quyidagi kodni ko'rib chiqing.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('#navcontainer ul li a').click(function() {
    $('.highlightMenu').removeClass('highlightMenu');
    $(this).addClass('highlightMenu');
  });
});
#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer li a:hover {
  color: #fff !important;
  background-color: #009ddc;
}

#navcontainer ul li a {
  text-decoration: none;
  padding: .2em 3em 1em 1em;
  color: #24387f !important;
  font-size: larger;
  font-weight: bold;
}

.highlightMenu {
  color: #fff !important;
  background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    
</div>
</div> </div>

7
Siz hover haqida gapiryapsizmi? Men nimani xohlasam, li ni bosganimda u mittigina qolishi kerak. Parchani ishga tushirganimda, men buni ko'rmayapman
qo'shib qo'ydi muallif Tom, manba
'/' Dasturida xato Server xatolik yuzaga keladi. Resurs topilmadi. Shuning uchun tugmani ko'rib bo'lmaydi
qo'shib qo'ydi muallif Tom, manba
Yo'q. Menyu qisman ko'rinishda. Men Team view va UserProfile ko'rinishini yuklaganimda, bu qisman ko'rinishni chaqiraman
qo'shib qo'ydi muallif Tom, manba
qo'shib qo'ydi muallif Tom, manba
Xristian Rory Agar siz qo'g'irchoq sahifani oxiriga qo'ysangiz ishlayaptimi?
qo'shib qo'ydi muallif Tom, manba
Ha, ha. Buning sababi, URL Stack Overflow serverida mavjud emas - bu misol.
qo'shib qo'ydi muallif Rory McCrossan, manba
Aloqada chertganingizda yangi sahifani yuklashni xohlaysizmi?
qo'shib qo'ydi muallif Rory McCrossan, manba
Sizning kodingiz parchada yaxshi ishlayotgan ko'rinadi.
qo'shib qo'ydi muallif Rory McCrossan, manba

8 javoblar

  1. You should read about CSS Specificity: your .highlightMenu {} selector will never be applied, because .#navcontainer ul li {} selector is more specific. Prefer Class selectors, check out BEM methodology.

  2. From MDN about !important:

    Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

  3. If you want to set .highlightMenu class to

  4. when clicking on , you could use jQuery .closest() for it.
  5. If you add list items dynamically, you could use Event Delegation.

Kodni tozalab, uni BEM tarzi yordamida tuzatib, tekshirib ko'rmoq:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.nav').on('click', '.nav__link', function() {
    $('.nav__item_selected').removeClass('nav__item_selected');
    $(this).closest('.nav__item').addClass('nav__item_selected');
});
.nav {
    display: block;
    list-style-type: disc;
    padding-top: 40px;
}

    .nav__item {
        display: inline-block;
        border: 5px solid #009ddc;
        padding: 0;
        background: #fff;
        color: #24387f;
    }
    
    .nav__item:hover, .nav__item_selected {
        color: #fff;
        background-color: #009ddc;
    }
    
    .nav__link {
        display: inline-block;
        text-decoration: none;
        padding: 0.2em 3em 1em 1em;
        color: #24387f;
        font-size: larger;
        font-weight: bold;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div> </div>

6
qo'shib qo'ydi
qo'shib qo'ydi muallif Tom, manba
Endi voqea delegatsiyasiga muhtoj bo'lmasligim mumkin, chunki men o'zimni sinchkovlik bilan yorliqqa qo'llay olaman. Oldingi kodingiz nima edi. Mening kodimni sinab ko'rdingizmi va u oxirida ishlayaptimi yoki yo'qmi
qo'shib qo'ydi muallif Tom, manba
Hey Sergey lavozimini o'zgartirdi. Nima uchun ishlamayotganini tushunolmayman. Xudo sizning kodingiz siznikiga o'xshash. Hatto ogohlantirish usuli yoqilmagan
qo'shib qo'ydi muallif Tom, manba
Sizning kodingizda li va yorliq uchun sinf o'rnatgansiz. Menda faqatgina html.action mavjud. Teg ish vaqtida yaratilganligi sababli tagni qanday qilib belgilash mumkin?
qo'shib qo'ydi muallif Tom, manba
Ushbu misolda ishlaydi, lekin html.action havolasini ishlay olishim kerak. Html.action havolasi MVC-da afzal qilingan yondashuv va to'g'ridan-to'g'ri tegdan foydalanish va urlni qo'lda yozishni tavsiya etilmaydi.
qo'shib qo'ydi muallif Tom, manba
Bundan tashqari, HTML/CSS/jQuery kodimni ishlatishingiz mumkin va elementlaringizni @ Html.ActionLink manzilingizga o'zgartirishi mumkin, lekin CSS-ni qo'shishingiz mumkin ularga nav__link . bu mavzuni CSS kodini @ Html.ActionLink ga qo'shish haqida.
qo'shib qo'ydi muallif Sergey Denisov, manba
@Tom Ha, tushunaman, faqat parchaning ishini bajarish uchun dan foydalandim, chunki snippet ichida u ishlamayapti, @ Html.ActionLink oddiy matn. Ishchi parchani yarating, masalan, bu erda - dotnetfiddle.net , men sizga yordam berishga harakat qilaman.
qo'shib qo'ydi muallif Sergey Denisov, manba
@ Ha ha, sen haqsan. Keyin Voqealar delegatsiyasi dan foydalanishingiz mumkin. Yangilangan javobni tekshiring (faqat Javascriptdagi birinchi qatorni o'zgartirdim).
qo'shib qo'ydi muallif Sergey Denisov, manba
@Uni sinab ko'rdingizmi? Har qanday muammolar bormi?
qo'shib qo'ydi muallif Sergey Denisov, manba
@Tomni tekshirib ko'ring - jsfiddle.net/8nd3sb95/2 . Kodni oldim va o'zgartirdim: adminnav CSS classini
qo'shib qo'ydi muallif Sergey Denisov, manba

CSS va ssenariyangizni biroz o'zgartirdim. Endi yangi sinf elementlarga to'g'ri qo'shiladi.

Please, have a look at https://fiddle.jshell.net/mh2gqmju/

Barcha ezgu tilaklarni tilayman.

2
qo'shib qo'ydi
Bu savolga nazariy jihatdan javob bersa ham, javobning muhim qismlarini bu yerga qo'shish uchun afzal bo'ladi Malumot uchun.
qo'shib qo'ydi muallif Mike McCaughan, manba
Men sekin urish funksiyasini ogohlantirishni sinab ko'rdim va u ishlamayapti.
qo'shib qo'ydi muallif Tom, manba
Kodni qo'llaganimda ishlamaydi
qo'shib qo'ydi muallif Tom, manba
Sekin urish hodisasi bo'yicha sinfni qo'shmayapti
qo'shib qo'ydi muallif Tom, manba
Bu g'alati, u Fiddleda ishlaydi ...
qo'shib qo'ydi muallif Daniele De Matteo, manba

Siz noto'g'ri qilayotganingiz ko'prikni belgilaydi, faqat ro'yxat elementini ta'kidlash kerak.

Ammo, agar siz kodni ro'yxatdagi ma'lumotlar ro'yxatini ko'prik o'rniga maqsad qilib qo'ysangiz, ekranda o'zgarishlarni ko'rmaysiz. (Siz brauzerning ishlab chiquvchisida ishlaydigan mashg'ulotlarni aniq ko'rishingiz mumkin).

Nima uchun shunday? Ro'yxat elementidagi ko'prik ro'yxat elementi chertganida ko'rmoqchi bo'lgan barcha o'zgarishlarni yashirganligi sababli.

O'zgarishlarni ko'rish uchun .highlightMenu ga yana bir CSS xususiyatini qo'shdim.

O'zingizga qarang:

  • JavaScript is modified to target the list-items, not hyperlinks within the ul in #navcontainer
  • .highlightMenu carries one extra CSS property now (outline), to notice the style changes on the click event.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('#navcontainer ul li').click(function() {
    $('.highlightMenu').removeClass('highlightMenu');
    $(this).addClass('highlightMenu');
  });
});
#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer li a:hover {
  color: #fff !important;
  background-color: #009ddc;
}

#navcontainer ul li a {
  text-decoration: none;
  padding: .2em 3em 1em 1em;
  color: #24387f !important;
  font-size: larger;
  font-weight: bold;
}

.highlightMenu {
  color: #fff !important;
  background-color: #009ddc;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    
</div>
</div> </div>

Umid qilamanki, bu yordam berdi.

2
qo'shib qo'ydi

Chertganingizda javob beradigan, lekin biron-bir buyruq faylini talab qilmaydigan elementlarga tezkor va qulaylik berish uchun:

  • elementga tabindex = "0" xususiyati qo'shing
  • : focus ifodasi bilan
  • foydalanib, uslublar elementga amal qiling.

Ish misoli:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

li {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(227, 227, 227);
background-color: rgb(127, 127, 127);
text-align: center;
vertical-align: top;
}

li:nth-of-type(1):hover {
color: rgb(255, 255, 0);
background-color: rgb(255, 0, 0);
}

li:nth-of-type(1):focus {
color: rgb(255, 255, 255);
background-color: rgb(0, 127, 0);
}

li:nth-of-type(2):hover {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}

li:nth-of-type(2):focus {
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 255);
}

  • Red on
    Hover

    Green on
    Click
  • Yellow on
    Hover

    Blue on
    Click
</div> </div>

1
qo'shib qo'ydi
Fokusni sinash uchun boshqa rangni qo'ymoqdaman. Shunday qilib, tugma bosilganda o'zgaradi, lekin keyinroq asl rangga o'tadi
qo'shib qo'ydi muallif Tom, manba
Men li elementga tabindex = 0 qo'shdim. Sichqoncha harakati faqat diqqat markazida emas. Buning sababini bilmayman
qo'shib qo'ydi muallif Tom, manba

Sizning kodingiz to'g'ri ... Faqat .css ni o'zgartiring.

Eski CSS: -

     padding: .2em 3em 1em 1em;

Changed to :-

padding: 2px 1px 1px 1px ;

See the screen shot enter image description here

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('#navcontainer ul li a').click(function() {
    $('.highlightMenu').removeClass('highlightMenu');
    $(this).addClass('highlightMenu');
  });
});
#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  cursor:pointer;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer li a:hover {
  color: #fff !important;
  background-color: #009ddc;
}

#navcontainer ul li a {
  text-decoration: none;
  padding: 2px 1px 1px 1px ; /*padding: .2em 3em 1em 1em;*/
  color: #24387f !important;
  font-size: larger;
  font-weight: bold;
}

.highlightMenu {
  color: #fff !important;
  background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
    
</div>
</div> </div>

1
qo'shib qo'ydi
@Tom - yuqoridagi javobni tekshiring
qo'shib qo'ydi muallif prog1011, manba

$(document).ready(function() {
   $(document).on('click', '#navcontainer ul li a', function() {
     $('.highlightMenu').removeClass('highlightMenu');
     $(this).addClass('highlightMenu');
  });`enter code here`
});



Please use the above added code i believe it's good for query..
1
qo'shib qo'ydi

Sizning kodingiz ishlamasligi mumkin deb o'ylayman bu sababdir

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#navcontainer ul li a').click(function()
</div> </div>

"li" yorlig'ini ta'kidlashni istasangiz, tanlangan selektorda "a" latchini qo'shdik. Bu shunday bo'lishi kerak:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#navcontainer ul li').click(function()
</div> </div>

Buni fiddle.jshell saytida tekshirib chiqdim va bu muammoni hal qilishda ko'rinadi.

1
qo'shib qo'ydi
Men uni qayta sinab ko'rdim. Juda yaqin, ammo kerakli natijaga erishish kerak. Men bir naqshni payqadim. Agar elementlardan birini tanlasangiz, ob'ektlardan biri tanlangan bo'ladi. Lekin agar to'g'ridan-to'g'ri biron-bir elementni tanlasam, unda u yo'q. Shuning uchun men ikki element o'rtasidagi maydonni tekshirganimda, men ishonaman elementni ro'yxatga olaman. Men shubha qilaman, bu faqat li ni bosish bilan amalga oshiriladi .Shuning uchun ham xuddi shuningdek, ulash yorlig'i uchun ham
qo'shib qo'ydi muallif Tom, manba
Ishlayotganimga aminmisiz, chunki mening ishimda faqatgina hover ishini ko'rishim mumkin. Men chertganimda tanlangan ro'yxatni belgilashga harakat qilaman
qo'shib qo'ydi muallif Tom, manba
Buni sinab ko'rdim va buning uchun harakat qilaman. Fiddle soloutionni baham ko'rasizmi?
qo'shib qo'ydi muallif Tom, manba
Mana bu fiddle echimi.
qo'shib qo'ydi muallif Louis Amon, manba
Mana bu fiddle echimi. fiddle.jshell.net/mh2gqmju/3 Men kodni bir necha narsa qo'shib qo'ydim ulanishni bosishning odatiy xatti-harakatini oldini olish. Ushbu echim selektorda "a" ga ega. Agar siz yechimga kirsangiz va "a" yorlig'ini olib tashlasangiz, bu maqsadga muvofiq ishlaydi
qo'shib qo'ydi muallif Louis Amon, manba

CSS va jquery-ga biroz o'zgarishlar kiritdim

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('#navcontainer ul li').click(function(e) {
        e.preventDefault();//Remove this line please, just for this example
    $(this).addClass('highlightMenu').siblings().removeClass('highlightMenu');
  });
});
#navcontainer ul {
  display: block;
  list-style-type: disc;
  padding-top: 40px;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

#navcontainer ul li {
  display: inline-block;
  /*height: 50px;
        width:150px;*/
  border: 5px solid #009ddc;
  border-left: 5px solid #009ddc;
  border-right: 5px solid #009ddc;
  border-bottom: 5px solid #009ddc;
  border-top: 5px solid #009ddc;
  z-index: 0 !important;
  padding: 0;
  background: #fff;
  color: #24387f !important;
}

#navcontainer li:hover {
  color: #fff !important;
  background-color: #009ddc;
}

#navcontainer ul li a {
  text-decoration: none;
  padding: .2em 3em 1em 1em;
  color: #24387f !important;
  font-size: larger;
  font-weight: bold;
}

#navcontainer ul li.highlightMenu {
  color: #fff !important;
  background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
  
</div>
</div> </div>

1
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb