-1

我有一个包含列表项的菜单，其 ID 与 div 相关联，每个包含与列表项相关的内容。我试图在单击特定列表项时显示内容。我意识到this指的是#agency ul li，但我似乎无法理解如何引用内容 div。

HTML

<ul id="agency">
            <li>Select an Agency</li>
            <ul>
                <li id="agriculture">Department of Agriculture</li>
                <li id="commerce">Department of Commerce</li>
                <li id="defense">Department of Defense</li>
                <li id="energy">Department of Energy</li>
                <li id="health">Department of Health and Human Services</li>
                <li id="homeland">Department of Homeland Security</li>
                <li id="interior">Department of the Interior</li>
                <li id="transportation">Department of Transportation</li>
                <li id="veterans">Department of Veteran Affairs</li>
                <li id="epa">Environmental Protection Agency</li>
                <li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
            </ul>
        </ul>

    <div id="agency-wrap">
        <div id="agriculture">
            <ul>
                <li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
                <li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
                <li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
            </ul>
        </div>
        <div id="commerce">
            <ul>
                <li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
                <li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
                <li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
                <li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
            </ul>
        </div>
        <div id="defense">
            <ul>
                <li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
                <li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
                <li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
                <li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
                <li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
                <li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
                <li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
            </ul>
        </div>
        <div id="energy">
            <ul>
                <li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
            </ul>
        </div>
        <div id="health">
            <ul>
                <li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
                <li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
                <li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
            </ul>
        </div>​

JS

$(function() {
    $('#agency-wrap > div').addClass('agency-hide');

    $('#agency ul li').click(function() {
        $("#" + $(this).attr('id')).fadeIn('slow').siblings().hide();
    });
});​

CSS

.agency-hide {
    display: none;
}        
#agency {
    width: 300px;
}​

我还没有设计 CSS 样式，功能完成后会处理它

http://jsfiddle.net/yD4D5/

4

3 回答 3

4

您不应该对同一文档中的两个元素使用相同的 id。

将每个对应div的id 保存为datali

<li data-id="agriculture">Department of Agriculture</li>

在js中

 $('#agency ul li').click(function() {
        $("#" + $(this).data("id")).fadeIn('slow').siblings().hide();
    });
于 2012-10-19T19:50:42.347 回答
1

当您使用 id 访问元素时，选择器引擎假定只有 1 个单一 ID，因为这应该是唯一的。这就是您看到这种行为的原因。

尝试用 class 替换 id 并将选择器更改为此

$("." + $(this).data("id")).fadeIn('slow').siblings().hide();

它应该工作正常..

检查小提琴

JS

$(function() {
    $('#agency-wrap > div').addClass('agency-hide');

    $('#agency ul li').click(function() {
        $("." + $(this).attr('id')).fadeIn('slow').siblings().hide();
    });
});​

HTML 

<ul id="agency">
            <li>Select an Agency</li>
            <ul>
                <li id="agriculture">Department of Agriculture</li>
                <li id="commerce">Department of Commerce</li>
                <li id="defense">Department of Defense</li>
                <li id="energy">Department of Energy</li>
                <li id="health">Department of Health and Human Services</li>
                <li id="homeland">Department of Homeland Security</li>
                <li id="interior">Department of the Interior</li>
                <li id="transportation">Department of Transportation</li>
                <li id="veterans">Department of Veteran Affairs</li>
                <li id="epa">Environmental Protection Agency</li>
                <li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
            </ul>
        </ul>

    <div id="agency-wrap">
        <div class="agriculture">
            <ul>
                <li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
                <li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
                <li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
            </ul>
        </div>
        <div class="commerce">
            <ul>
                <li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
                <li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
                <li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
                <li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
            </ul>
        </div>
        <div class="defense">
            <ul>
                <li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
                <li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
                <li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
                <li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
                <li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
                <li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
                <li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
            </ul>
        </div>
        <div class="energy">
            <ul>
                <li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
            </ul>
        </div>
        <div class="health">
            <ul>
                <li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
                <li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
                <li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
            </ul>
        </div>​
于 2012-10-19T19:54:56.193 回答
0

您必须为 div 指定不同的 ID。顾名思义，ID 必须是唯一的。这就是为什么您无法访问 div 的原因，因为它的 ID 不是唯一的。

于 2012-10-19T19:51:10.023 回答