Показать сообщение отдельно
  #15 (permalink)  
Старый 03.03.2015, 10:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  li.select label{
    background: #FF9933;
  }
  li label{
    cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
    $('#one li').click(function() {
    $('#one li').removeClass('select');
    $(this).addClass('select');
    $('#two').find('li').show().not('[data-id="'+$(this).data('id')+'"]').hide();

}).eq(0).click()
});


  </script>
</head>

<body>


<ul id="one">
   <li data-id="fg_0">
       <label for="test1">Значение 1</label>
   </li>
   <li data-id="fg_1">
       <label for="test2">Значение 2</label>
   </li>
   <li data-id="fg_2">
       <label for="test3">Значение 3</label>
   </li>
</ul>

<ul id="two">
   <li data-id="fg_0">
       <label for="test4">Значение 1.1</label>
   </li>
   <li data-id="fg_0">
       <label for="test4">Значение 1.2</label>
   </li>
   <li data-id="fg_1">
       <label for="test5">Значение 2.1</label>
   </li>
   <li data-id="fg_1">
       <label for="test5">Значение 2.2</label>
   </li>
   <li data-id="fg_2">
       <label for="test6">Значение 3.1</label>
   </li>
   <li data-id="fg_2">
       <label for="test6">Значение 3.2</label>
   </li>
</ul>



</body>

</html>
Ответить с цитированием