I am trying to get a border added to the li when it is clicked. Here's my code.
<div class="noselect round" id="teach_edit_navigation_holster">
<ul id="teach_edit_navigation">
<li id="edittab_one" class="teach_nav_roundleft">
<span>Item</span>
</li>
<li class="" id="edittab_two">
<span>Item</span>
</li>
<li class="" id="edittab_three">
<span>Documents</span>
</li>
<li class="" id="edittab_four">
<span>Item</span>
</li>
<li class="" id="edittab_five">
<span>Item</span>
</li>
<li class="teach_nav_r开发者_JAVA百科oundright" id="edittab_six">
<span>Item</span>
</li>
</ul>
</div>
Here's the Jquery. I want the whole li box to have a border on it, not the span. The code below is putting a border on a span. I don't know how to select the actual li. THank you!
$(document).ready(function () {
$('#edittab_two_s, #edittab_three_s, #edittab_four_s, #edittab_five_s, #edittab_six_s').hide();
// $('#teach_edit_navigation').find('#edittab_one').css({
// "background-color": "black" // set highlight to first item on page "home"
// });
});
$('#teach_edit_navigation_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.edittab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
$('#teach_edit_navigation_holster li span').css({
"border": "none" // reset all to default color
});
$this.find('span').css({
"border-bottom": "1px solid black" // set highlight to this element only
});
});
});
The <li>
is represented by $this
. This should work for you:
$('#teach_edit_navigation_holster li').css({ // !!! remove span
"border": "none" // reset all to default color
});
$this.css({ // !!! remove .find('span')
"border-bottom": "1px solid black" // set highlight to this element only
});
Change this:
$this.find('span').css({
"border-bottom": "1px solid black" // set highlight to this element only
});
For this:
$this.css({
"border-bottom": "1px solid black" // set highlight to this element only
});
精彩评论