JQuery скрыть / показать с меткой выбора - PullRequest
Новая
       2

JQuery скрыть / показать с меткой выбора

1 голос
/ 10 июня 2010

Меня попросили создать функцию скрытия / показа с тегом выбора. Функция в значительной степени будет при нажатии на один из параметров в теге выбора, он, конечно, откроет ассоциативную связь с div. Если честно, я понятия не имею, как подойти к этой функции. Найдите ниже HTML-код. 

<div class="adwizard">
                            <select id="selectdrop" name="selectdrop" class="adwizard-bullet">
                                    <option value="adwizard">AdWizard</option>
                                    <option value="collateral">Collateral Ordering Tool</option>
                                    <option value="ebrochure">eBrochures</option>
                                    <option value="brand">Brand Center</option>
                                    <option value="funtees">FunTees</option>
                            </select>
                    </div>

                     <div class="panels">   
                        <div id="adwizard" class="sub-box showhide">
                            <img src="../images/bookccl/img-adwizard.gif" width="95" height="24" alt="AdWizard" />
                            <p>Let Carnival help you grow your business with our great tools! Lor ipsum dolor sit amet. <a href="https://www.carnivaladwizard.com/home.asp">Learn More</a></p>
                        </div>

                         <div id="collateral" class="sub-box showhide">
                            <p>The Collateral Ordering Tool makes it easy for you to order destination brochures and the sales DVD for that upcoming event. <a href="http://carnival.litorders.com/workplace.asp">Learn More</a></p>
                        </div>

                        <div id="ebrochure" class="sub-box showhide">
                            <img src="../images/bookccl/img-ebrochure.gif" width="164" height="39" alt="Brochures" />
                            <p>Show your clients that you're listening to their specific vacation needs by delivering relevant planning info quickly.  <a href="http://productiontrade.carnivalbrochures.com/start.aspx">Learn More</a></p>
                        </div>

                         <div id="brand" class="sub-box showhide">
                            <p>Carnival Brand Center is where you'll find information on our strategy, guidlines, templates and artwork.   <a href="https://carnival.monigle2.net/user_info.asp?login_type=agent">Learn More</a></p>
                        </div>

                        <div id="funtees" class="sub-box showhide">
                            <img src="../images/bookccl/img-funtees.gif" width="164" height="39" alt="Funtees" />
                            <p>Create your very own Fun Design shirts to commemorate that special occasion aboard a Carnival "Fun Ship!"  <a href="http://carnival.victorydyo.com/">Learn More</a></p>
                        </div>
                    </div><!-- ends .panel -->
                    <a class="view" href="#">See All Marketing Tools</a>
                </div>

Ответы [ 3 ]

2 голосов
/ 10 июня 2010

Я взял ваш код выше и сделал jsfiddle с (я полагаю) функциональностью, которую вы искали.

1 голос
/ 10 июня 2010 
$(document).ready(function() {
    $('#selectdrop').change(function() {
        $('.panels div').hide();
        var panel = $(this).val();
        $('#' + panel).show();
    });
});

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

0 голосов
/ 10 июня 2010

Или лучше 

<head>
<script>
$(document).ready(function() {
    $('.panels div').hide();// << IMPORTANT
    $('#selectdrop').change(function() {
        $('.panels div').slideUp();
        var panel = $(this).val();
        $('#' + panel).slideDown();
    });
});
</script>
</head>
<body>
.. The page ..
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...