jQuery使用select标记隐藏/显示_Jquery_Html_Css

jQuery使用select标记隐藏/显示

jquery html css

jQuery使用select标记隐藏/显示,jquery,html,css,Jquery,Html,Css,我被要求创建一个带有select标记的隐藏/显示函数。这个函数的作用是，当你点击select标签中的一个选项时，它会打开一个与div关联的div。老实说，我不知道如何实现这个功能。找到下面的html代码 <div class="adwizard"> <select id="selectdrop" name="selectdrop" class="adwizard-bullet">

我被要求创建一个带有select标记的隐藏/显示函数。这个函数的作用是，当你点击select标签中的一个选项时，它会打开一个与div关联的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>


广告向导
辅助订购工具
热情洋溢
品牌中心
风趣的
让嘉年华用我们强大的工具帮助您发展业务！我爱你，我爱你
抵押品订购工具使您可以轻松订购即将到来的活动的目的地手册和销售DVD
通过快速提供相关的计划信息，向客户表明您正在倾听他们的具体度假需求
嘉年华品牌中心是您可以找到有关我们的战略、指南、模板和艺术品的信息的地方
制作您自己的趣味设计衬衫，在嘉年华“趣味船”上纪念这一特殊时刻

未经测试，但我认为这会起作用。。。这很粗糙，但只是一个起点，而且肯定可以做得更好。

我把你的代码放在上面，并且（我相信）有你想要的功能。

或者更好

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


$（文档）.ready（函数（）{
$（'.panels div'）.hide（）；//它已关闭，但不是我想要的效果。我需要打开其中一个选项，关闭其他选项，直到单击它们。是的，我意识到我在第一次保存它后错过了隐藏。感谢修复：）更新到答案中的链接。@Gaby非常感谢你，我一生都欠你的债。它运行得很好。这个问题是我需要选择一个div。但是效果很好。请注意，你应该通过单击该答案左侧的灰色复选标记来接受帮助你的最佳答案，并投票选择好的答案单击向上箭头进行WER
<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>