Блог

Главная - Вопросы по программированию - как изменить несколько divs с помощью javascript

как изменить несколько divs с помощью javascript

#javascript #php

#javascript #php

Вопрос:

Проблема:

Я пытаюсь создать вкладку стикеров с помощью html, php, css и javascript. Вкладка «Стикер» отображается успешно, но у меня возникают проблемы с переключением между вкладками.

Ниже есть скриншот…. Первая вкладка с наклейками отображается автоматически, но при нажатии на другую вкладку она исчезает. Это не переходит на следующую вкладку… Я устал

Вопрос:

Как мне изменить несколько разделов с помощью javascript?

Что я пробовал:

 <a href="#" class="input-group-btn emo-comment dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >
    <span class="btn btn-file"  style="padding:12px 0px 20px 0px;    margin-left: -22px;"><i class="mhd mhd24 mhd-sticker-emoji" data-icon="sticker-emoji" onclick="document.getElementById('tab-1<?php echo $wo['story']['id'];?>')"></i></span>
</a>
<ul class="dropdown-menu pull-right">
    <div class="pretty_emoticon<?php echo $wo["story"]["id"];?>">
        <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('boys'); ?>"></li>
        <li class="tab-link" data-tab="tab-2<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('bear'); ?>"></li>
        <li class="tab-link" data-tab="tab-3<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('domba'); ?>"></li>
        <li class="tab-link" data-tab="tab-4<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('smiles'); ?>"></li>
        <li class="tab-link" data-tab="tab-5<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('cute-girl'); ?>"></li>
        <li class="tab-link" data-tab="tab-6<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('sweaty-girl'); ?>"></li>
        <li class="tab-link" data-tab="tab-7<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('smile-emoticon'); ?>"></li>
        </ul>
        <div id="tab-1<?php echo $wo["story"]["id"];?>" class="tab-content current" id="buka_twemoji<?php echo $wo["story"]["id"];?>">
            <?php foreach ($wo['boysstickers'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-2<?php echo $wo["story"]["id"];?>" class="tab-content">
            <?php foreach ($wo['meongemoji'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-3<?php echo $wo["story"]["id"];?>" class="tab-content">
            <?php foreach ($wo['animalstickers'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-4<?php echo $wo["story"]["id"];?>" class="tab-content">
            <?php foreach ($wo['reactionstickers'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv53 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-5<?php echo $wo["story"]["id"];?>" class="tab-content">
            <?php foreach ($wo['womencute'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-6<?php echo $wo["story"]["id"];?>" class="tab-content">
            <?php foreach ($wo['girlcute'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; } ?>
        </div>
        <div id="tab-7<?php echo $wo["story"]["id"];?>" class="tab-content">
            <h5>People amp; Smyle</h5>
            <?php foreach ($wo['emotorang'] as $code => $name) { $code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
            <h5>Symbol</h5>
            <?php foreach ($wo['emotsimbol'] as $code => $name) {$code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
            <h5>Food amp; Drink</h5>
            <?php foreach ($wo['emotmakanan'] as $code => $name) {$code   = $code; echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
            <h5>Nature amp; Animal</h5>
            <?php foreach ($wo['emotnatural'] as $code => $name) {$code   = $code;echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
            <h5>Activity</h5>
            <?php foreach ($wo['emotaktivitas'] as $code => $name) {$code   = $code;echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
            <h5>Places amp; Travel</h5>
            <?php foreach ($wo['emottamasya'] as $code => $name) {$code   = $code;echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; } ?>
        </div>
    </div>
</ul>
<style>
.relevan{text-align:center;text-decoration:none!important;text-align:center;font-size:15px;display:-webkit-box;position:relative;font-weight:600;margin:7px;}
.pretty_emoticon<?php echo $wo["story"]["id"];?>{width: 350px;margin: 0 auto;height:300px;overflow:auto;text-align:center;}
ul.tabs{margin: 0px;padding: 0px;list-style: none;}
ul.tabs li{border-bottom: 1px #ededed solid;background:none;display: inline-block;padding: 10px 9px;cursor: pointer;}
ul.tabs li.current{background: #ededed;color: #222;}
.tab-content{display:none;padding: 15px;}
.tab-content.current{display: inherit;}
</style>
<script>
$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#" tab_id).addClass('current');
    })
})
$( "ul.tabs" ).click(function( event ) {
  event.stopPropagation();
});
</script>

https://i.stack.imgur.com/792Z1.jpg

Комментарии:

1. Реорганизованная формулировка. Не уверен в актуальном вопросе, пришлось отложить вопрос, используемый в title.

2. Дело в том, что это вкладка стикера с категориями.. Я хочу иметь возможность переключать категории.. Когда одно отображается, другое должно скрываться…. Нравится что-то в этом роде

3. Я добавил изображение, чтобы прояснить это… Пожалуйста, помогите