jQuery « Подсветка активного элемента внутри стороннего дива

Дан список, который, по клику, подсвечивает элемент в диве. В приведенной ниже конструкции, подсветка возможна единожды, и, навсегда. Подскажите пожалуйста, как сделать красиво!?
* под красотой, следующее: клик по "Первому" - добавили класс "Первому блоку", клик по "Второму" - второй подсветили, а первый обнулили, и так далее...).

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<ul>
<li><a href='#n1'>Первый</a></li>
<li><a href='#n2'>Второй</a></li>
<li><a href='#n3'>Третий</a></li>
</ul>

<div id='content'>
<ul>
<li id='n1'>Первый блок</li>
<li id='n2'>Второй блок</li>
<li id='n3'>Третий блок</li>
</ul>
</div>
 

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

<script>
    $(document).ready(function() {
           $('ul a').click(function(e) {
            var clickId = $(this).attr('href');
            $('li#n1').addClass('active');
        });
    });
</script>
 
0
id подсветка список

1 ответов

1

Если я правильно вас понял

http://jsfiddle.net/W9aGS/

1

Спасибо, оба прекрасны!

UPD1. Нюансы таковы, в первом варианте (см. ниже) не уточняется конкретный див #content, во-втором, с уточнением все в порядке, но физически линки не задействованы, что не есть плохо, так тоже нужно.
UPD2. Также, вариант с b-list-item не предусматривает такого выделения блока, когда задана, к примеру, такая последовательность (выделяются блоки 1-2-3, а не 1-3-6, как задано):


<div class="b-block b-init">
    <ul class="b-list">
        <li class="b-list-item"><span>Первый</span></li>    
        <li class="b-list-item"><span>Третий</span></li>
        <li class="b-list-item"><span>Шестой</span></li>
    </ul>
</div>

<div class="b-block b-target">
    <ul class="b-list">
        <li class="b-list-item">1</li>
        <li>2</li>
        <li class="b-list-item">3</li>
        <li>4</li>
        <li>5</li>
        <li class="b-list-item">6</li>
    </ul>
</div>
 

От Bluesbro:

<ul>
<li><a href='#n1'>Первый</a></li>
<li><a href='#n2'>Второй</a></li>
<li><a href='#n3'>Третий</a></li>
</ul>

<div id='content'>
<ul>
<li id='n1'>Первый блок</li>
<li id='n2'>Второй блок</li>
<li id='n3'>Третий блок</li>
</ul>
</div>
 

$(document).ready(function() {
    $('ul a').click(function() {
        var clickId = $(this).attr('href');
        $(clickId).addClass('active').siblings().removeClass('active');
    });
});
 

От Vend3tta:

<div class="b-block b-init">
    <ul class="b-list">
        <li class="b-list-item"><span>Первый</span></li>    
        <li class="b-list-item"><span>Второй</span></li>
        <li class="b-list-item"><span>Третий</span></li>
    </ul>
</div>

<div class="b-block b-target">
    <ul class="b-list">
        <li class="b-list-item">Первый блок</li>
        <li class="b-list-item">Второй блок</li>
        <li class="b-list-item">Третий блок</li>
    </ul>
</div>
 

var $t = $('.b-target').find('.b-list');
var active_class = 'b-list-item_active';

$('.b-init').find('span').click(function() {
    var index = $(this).parent().index();
    $t.children().removeClass(active_class);
    $t.children().eq(index).addClass(active_class);
})
 

А теперь внимание, для полноты и без того совершенной архитектуры, как:

1. Также синхронно подсвечивать линки.
2. При первом открытии подсвечивать:
  • только произвольный линк;
  • только произвольный блок;
  • оба (важно! выделение только до момента действия);
3. Присваивать каждому блоку и/или линку индивидуальный класс.

UPD3. Вариант с синхроничным подсвечивание реализовать удалось (вероятно можно сделать и короче).
http://jsfiddle.net/capricorn/SDJKQ/

$(document).ready(function() {
    $('ul a').click(function() {
        var clickId = $(this).attr('href');
          $(clickId).addClass('active').siblings().removeClass('active');
    });
});

$(document).ready(function(){
$('ul a').click(function(){
$('ul a').removeClass('active');
$(this).addClass('active')
})
});
 
0

Спасибо Bluesbro, рассмотрим крайний вариант. Все просто великолепно, за исключением одного - переход внутри дива. Помимо этого, действие не будет совершаться без поддержки явы (хоть и лишние якорные ссылки запросто могут ввести в заблуждение неискушенного пользователя).

0