Форум

Sergiore · #1 (**permalink**) 02.12.2015, 13:42

Мои познания оставляют желать лучшего.
Решил зайти к вам и поинтересоваться.

на странице существует два id, например:

<div id="id1"></div> и <div id="id2"></div>

как сделать так чтобы если у id2 в сss display: none; то отображать id1 и наоборот.

Mess4me · #2 (**permalink**) 02.12.2015, 15:02

Sergiore,
вот так?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
      <title></title>
    <style>
        div {
            border: 1px solid black;
        }
        
    </style>
</head>
<body>
 
<div id="id1">1</div> и <div id="id2">2</div>
<script>

    var id1 = document.getElementById('id1');
    var id2 = document.getElementById('id2');

    id1.addEventListener('click', function (event) {
        this.style.display = 'none';
        id2.style.display = 'block';
    });

    id2.addEventListener('click', function (event) {
        this.style.display = 'none';
        id1.style.display = 'block';
    })


</script>
</body>
</html>

Sergiore · #3 (**permalink**) 02.12.2015, 18:34

Сообщение от Mess4me

Sergiore,
вот так?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
      <title></title>
    <style>
        div {
            border: 1px solid black;
        }
        
    </style>
</head>
<body>
 
<div id="id1">1</div> и <div id="id2">2</div>
<script>

    var id1 = document.getElementById('id1');
    var id2 = document.getElementById('id2');

    id1.addEventListener('click', function (event) {
        this.style.display = 'none';
        id2.style.display = 'block';
    });

    id2.addEventListener('click', function (event) {
        this.style.display = 'none';
        id1.style.display = 'block';
    })


</script>
</body>
</html>

огромное спасибо

помогите к этому прикрутить animate
чтобы переключение было плавным.... и тогда цены вам не будет уважаемый.

Mess4me · #4 (**permalink**) 02.12.2015, 19:03

Sergiore,
чтобы медленно исчезало или что?

Mess4me · #5 (**permalink**) 02.12.2015, 19:17

Sergiore,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
      <title></title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
        div {
            border: 1px solid black;
        }
        
    </style>
</head>
<body>
 
<div id="id1">1</div> и <div id="id2">2</div>
<script>


    $('#id1, #id2').on('click', function (event) {
        if(this.id == 'id1') {
            $(this).hide(500);
            $('#id2').show(500)
        };
        if(this.id == 'id2') {
            $(this).hide(1000);
            $('#id1').show(1000);
        }
    })




</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript