Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение свойств одного id после получения свойств второго id! (https://javascript.ru/forum/misc/59902-izmenenie-svojjstv-odnogo-id-posle-polucheniya-svojjstv-vtorogo-id.html)

Sergiore 02.12.2015 13:42
Изменение свойств одного id после получения свойств второго id!
 
Мои познания оставляют желать лучшего.
Решил зайти к вам и поинтересоваться.

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

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

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

Mess4me 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 02.12.2015 18:34
Цитата:
Сообщение от Mess4me (Сообщение 398403)
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 02.12.2015 19:03
Sergiore,
чтобы медленно исчезало или что?

Mess4me 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>


Часовой пояс GMT +3, время: 13:17.