Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.01.2014, 18:46
Новичок на форуме
Отправить личное сообщение для serdef Посмотреть профиль Найти все сообщения от serdef
 
Регистрация: 16.12.2013
Сообщений: 8

Замена класса
Здравствуйте.
Помогите решить следующую задачку. Есть некая структуру в коде, все Тексты изначально скрыты классом .clear Как правильно написать функцию, чтобы при клике на «2» отобразился «Текст 2», произошла замена класса на .activ. Ну и чтобы при выборе 1 соответственно отобразился Текст 1, а Текст 2 обратно стал неактивным.

<style>
.clear {display: none;}
.activ {display: block;}
</style>

<div class="tv">
        <div class="date" onclick="check();">1</div>
        <div class="clear">Текст 1</div>
</div>
<div class="tv">
        <div class="date" onclick="check();">2</div>
        <div class="clear">Текст 2</div>
</div>
<div class="tv">
        <div class="date" onclick="check();">3</div>
        <div class="clear">Текст 3</div>
</div>


<script>
function check() {

}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 01.01.2014, 19:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от serdef
при клике на «2» отобразился «Текст 2», произошла замена класса на .activ. Ну и чтобы при выборе 1 соответственно отобразился Текст 1, а Текст 2 обратно стал неактивным
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
.clear {display: none;}
.activ {display: block;}
</style>
<script type="text/javascript">
$(function (){
	$('.date').click(function (){
		$('.container .activ').removeClass('activ').addClass('clear');
		$(this).next().removeClass('clear').addClass('activ');
	});
});
</script>
</head>
<body>
<div class='container'>
	<div class="tv">
		<div class="date">1</div>
		<div class="clear">Текст 1</div>
	</div>
	<div class="tv">
		<div class="date">2</div>
		<div class="clear">Текст 2</div>
	</div>
	<div class="tv">
		<div class="date">3</div>
		<div class="clear">Текст 3</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 01.01.2014, 21:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

NoJQuery вариант!
<style>
.date{
    background: #D5A4C9;
    cursor: pointer;
    margin-bottom: 1px;
}
.spoiler{
    border: 1px solid blue;
}
.clear {
    display: none;
}
</style>
 
<div class="tv">
        <div class="date">1</div>
        <div class="spoiler clear">Текст 1</div>
</div>
<div class="tv">
        <div class="date">2</div>
        <div class="spoiler clear">Текст 2</div>
</div>
<div class="tv">
        <div class="date">3</div>
        <div class="spoiler clear">Текст 3</div>
</div>
<script>
(function(){
    var active = null;
    var onclick = function() {
        var block = this.parentNode.querySelector('.spoiler');
        if (active !== null) {
            active.className += ' clear';
            if (active === block) {
                active = null;
                return;
            }
            active = null;
        }
        block.className = 'spoiler';
        active = block;
    }
    var togglers = document.querySelectorAll('.tv .date');
    for (var i = 0, toggler; toggler = togglers[i]; i++) {
        toggler.onclick = onclick;
    }
})();
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена класса элемента razorg1991 Элементы интерфейса 8 23.09.2013 21:08
Возможна замена класса (для работы с фреймворком css)? Faab jQuery 4 16.06.2013 03:39
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Свойства/методы класса TicTac Общие вопросы Javascript 5 03.07.2011 14:53
Замена CSS класса каждого четвертого div iGusse jQuery 4 17.12.2009 23:51