jQuery隐藏/显示选择标记

我被要求用选择标记创建隐藏/显示功能。当你点击选择标签中的一个选项时，该功能将会非常多，它将打开一个div与div当然关联。说实话，我不知道如何处理这个功能。在html代码下面找到。jQuery隐藏/显示选择标记

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

来源

2010-06-10 Ozzy

注意，你应该接受最好的答案是通过点击一下这个问题的答案，并投票选出好的答案左侧的灰色对号帮你向上箭头 – oezi 2010-06-11 15:00:09

我把上面的代码和made a jsfiddle与（我相信）你正在寻找的功能。

来源

2010-06-10 18:19:51

我认为这更新到您的代码是更完整的.. http://jsfiddle.net/fbcS9/3/ – 2010-06-10 18:24:13

它是接近，但不是我正在寻找的效果。我需要打开其中一个选项并关闭其他选项，直到它们被点击， – Ozzy 2010-06-10 18:26:59

是的，我意识到我在第一次保存后就错过了皮。感谢您的修复:)更新到您的链接中的答案。 – 2010-06-10 18:27:32

$(document).ready(function() { 
    $('#selectdrop').change(function() { 
     $('.panels div').hide(); 
     var panel = $(this).val(); 
     $('#' + panel).show(); 
    }); 
});

未经检验的，但我认为这会工作......这是很粗糙，但一个起跳点，最能肯定会做的更好。

来源

2010-06-10 18:17:58

或者更好

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

来源

2010-06-10 18:23:03 nebkat

这个问题是我需要有一个选定的div。但是完美的作品。 – Ozzy 2010-06-10 18:36:25

@Ozzy 然后好，没有为我工作：P – nebkat 2010-06-10 18:41:17

jQuery隐藏/显示选择标记

回答

相关问题