Форум

serdef · #1 (**permalink**) 01.01.2014, 18:46

Здравствуйте.
Помогите решить следующую задачку. Есть некая структуру в коде, все Тексты изначально скрыты классом .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>

ksa · #2 (**permalink**) 01.01.2014, 19:59

Сообщение от 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>

danik.js · #3 (**permalink**) 01.01.2014, 21:44

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>

Форум

Справочник

Discord чат

Курсы javascript