адаптация показать / скрыть по клику

Question

адаптация показать / скрыть по клику

0

Я пытаюсь адаптировать некоторый код jquery, который я нашел здесь, чтобы показать/скрыть divs при щелчке, но пример, похоже, работает, перелистывая между двумя div (как показано на рисунке ниже), и я не могу понять, как добавить третий.. просто добавив еще одну строку, чтобы она появилась в части "Щелчок", очевидно, не работает. Я понимаю, как работает функция в данный момент, но у меня возникают проблемы с концептуализацией того, как ее расширить.

    <html>
    <head>
        <script src="/jquery.min.js"></script>
        <STYLE>

    #img{padding-left: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        max-height: 90%;
    float: left;
    }
    #contents{padding-left: 10%;
        padding-right: 10%;
        padding-top: 12%;
    float: left;
    font-family: sans-serif;
            font-size: large;
            font-weight:bolder ;
        line-height: 15px;
    } 
    #text1 {font-family: sans-serif;
        padding-top ;
        max-width: 100%;
        padding-bottom: 10%;
        margin-left: auto;
        margin-right: auto;
    float:left;}
    #text2{font-family: sans-serif;
        padding-top;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    float:left;}



    div.hide{display:none;}
    div.show {}

    </style>
    </head>
    <body>

    <p id="img"><img src="http://www.newgalerie.us/cache_img/w400_db77979c2a3abfb62b58e139cbaf39056f.png"></p>
        <p id="contents"> 

    <a onclick="showText('text1','text2')" href="javascript:void(0);">TEXT1</a><br></br>
    <a onclick="showText('text2','text1')" href="javascript:void(0);">TEXT2</a>
    </p>
    <div id="text1" class="hide"> 
            TEXT1   

 </div>
<div id="text2" class="hide"> TEXT2 
</div>
<script>
function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}
</script>

</body>
</html>

user3079080 14 апр. 2014, в 02:16

Источник

0

переосмыслите, как работает ваш код, передача параметров в нем излишне сложна.
Aboba 13 апр. 2014, в 23:21
0

Чтобы сделать мой последний комментарий более полезным, вы также можете рассмотреть альтернативы использованию атрибута onclick в своем HTML-коде.
Aboba 13 апр. 2014, в 23:25
1

Кажется, что функция переключения может быть путь вперед ... копать
user3079080 13 апр. 2014, в 23:31

Показать ещё 1 комментарий

Теги:

jquery

html

2 ответа

0

Замените ссылки и divs на что-то вроде этого:

<a class="showDiv" data-targetclass="div1">...</a>
<a class="showDiv" data-targetclass="div2">...</a>

<div class="div1">...</div>
<div class="div2">...</div>

Тогда простая функция jQuery покажет div на клике:

jQuery(document).ready(function($) {
    $('.showDiv').on('click', function(e) {
        e.preventDefault();
        var divClass = '.'+$(this).data('targetclass');
        $(divClass).show();
    });
});

emerson 13 апр. 2014, в 22:07

Ещё вопросы

переосмыслите, как работает ваш код, передача параметров в нем излишне сложна.
Чтобы сделать мой последний комментарий более полезным, вы также можете рассмотреть альтернативы использованию атрибута onclick в своем HTML-коде.
Кажется, что функция переключения может быть путь вперед ... копать

Xawier · Accepted Answer · 2014-04-13T21-42-00.000Z

Человек, в-1, вы не используете jquery... это чистый javascript :)

Вы можете выкинуть строку с jquery...

Второй. Ваш код действительно грязный, и эта функция не является хорошим решением, но если вы только подыщите 3 divs, все будет в порядке. Этот код:

HTML:

<p id="img">
    <img src="http://www.newgalerie.us/cache_img/w400_db77979c2a3abfb62b58e139cbaf39056f.png">
</p>
<p id="contents"> <a onclick="showText('text1','text2','text3')" href="javascript:void(0);">TEXT1</a>
    <br></br> <a onclick="showText('text2','text1','text3')" href="javascript:void(0);">TEXT2</a>

    <br></br> <a onclick="showText('text3','text1','text2')" href="javascript:void(0);">TEXT3</a>

</p>
<div id="text1" class="hide">TEXT1</div>
<div id="text2" class="hide">TEXT2</div>
<div id="text3" class="hide">TEXT3</div>
<script>
    function showText(show, hide1, hide2) {
        document.getElementById(show).className = "show";
        document.getElementById(hide1).className = "hide";
        document.getElementById(hide2).className = "hide";
    }
</script>

CSS:

 #img {
     padding-left: 10%;
     padding-top: 5%;
     padding-bottom: 5%;
     max-height: 90%;
     float: left;
 }
 #contents {
     padding-left: 10%;
     padding-right: 10%;
     padding-top: 12%;
     float: left;
     font-family: sans-serif;
     font-size: large;
     font-weight:bolder;
     line-height: 15px;
 }
 #text1 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     padding-bottom: 10%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 #text2 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 #text3 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 div.hide {
     display:none;
 }
 div.show {
 }

FIDDLY: http://jsfiddle.net/w8j2t/

это работает и имеет смысл, просто нужно добавить больше скрытых переменных для учета каждого нового div.