显示具有多个ID JavaScript的列表

时间：2013-06-17 23:12:05

标签： javascript jquery html html5

我有一系列无序列表。每个li具有某个类别的id，例如1或2类。

我有一个Javascript方法，允许用户只显示具有特定ID的lis。但是，我希望有一些lis有多个id。

例如，有类别和项目。项目可以属于多个类别。我如何在我的HTML和JS中解释这一点？我试图给一个li多个id，但它忽略id =“3”并且只考虑提供的第一个id，即id =“1”

我希望这是有道理的。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="">
<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script><![endif]--> 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> 

<script type="text/javascript">
        function ani(){
            document.getElementById('filters').className ='.filters';
        }
</script>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         var content = document.getElementsByClassName('content');

         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'inline';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<style>
.filters
{
   position: relative; margin-top: -10px;
   animation-name: slide-down; animation-duration: 1s;
   -moz-animation-name: slide-down; -moz-animation-duration: 1s;
   -webkit-animation-name: slide-down; -webkit-animation-duration: 1s; 
}


@keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-moz-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-webkit-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}
</style>

</head>

<body>

<header>

    <div class="logo"><img class="logo" src="images/logo2.png"></div>

</header>

<section id="work">

<section id="filters" onclick="ani()">
<a href="#" onclick="toggleVisibility('3');">Web Design and Mobile Applications</a>
<a href="#">Service Design and Digital Branding</a>
<a href="#">Physical Computing</a>
<a href="#">Responsive Environments</a>
<a href="#">Data Visualisation</a>
<a href="#">Interactive Storytelling</a>
</section>

    <ul>
        <li id="1" id="3" class="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li id="2" class="content"><a href="#"><img src="images/work/2.jpg"></a></li>
        <li id="3" class="content"><a href="#"><img src="images/work/3.jpg"></a></li>
        <li id="4" class="content"><a href="#"><img src="images/work/4.jpg"></a></li>
        <li id="5" class="content"><a href="#"><img src="images/work/5.jpg"></a></li>
        <li id="6" class="content"><a href="#"><img src="images/work/6.jpg"></a></li>
        <li id="1" class="content"><a href="#"><img src="images/work/1.jpg"></a></li>
        <li id="2" class="content"><a href="#"><img src="images/work/8.jpg"></a></li>
        <li id="3" class="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li id="4" class="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li id="5" class="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li id="6" class="content"><a href="#"><img src="images/work/2.jpg"></a></li>
    </ul>

</section>

<script type="text/javascript" src="/js/retina/retina.js"></script>

</body>

</html>

3 个答案:

答案 0 :(得分：2)

id在页面上应该是唯一的，任何元素只能有一个。

但是，您可以在一个元素上设置多个类，并且任何给定的类都不必具有与之关联的任何CSS。

你可以拥有，例如：

<li id="li1" class="green projects rubbish">text...</li>

其中.green设置绿色文本，其他类用于对<li>

进行分类

答案 1 :(得分：0)

我相信这是你想要实现的目标

CSS 

.filters {
    position: relative;
    margin-top: -10px;
    animation-name: slide-down;
    animation-duration: 1s;
    -moz-animation-name: slide-down;
    -moz-animation-duration: 1s;
    -webkit-animation-name: slide-down;
    -webkit-animation-duration: 1s;
}
@keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-moz-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-webkit-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}

HTML 

<header>
    <div class="logo">
        <img class="logo" src="images/logo2.png">
    </div>
</header>
<section id="work">
    <section id="filters">
        <a href="#">Web Design and Mobile Applications</a>
        <a href="#">Service Design and Digital Branding</a>
        <a href="#">Physical Computing</a>
        <a href="#">Responsive Environments</a>
        <a href="#">Data Visualisation</a>
        <a href="#">Interactive Storytelling</a>
    </section>
    <ul>
        <li id="1" data-category="3" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="2" data-category="3" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
        <li id="3" data-category="3" class="content">
            <a href="#"><img src="images/work/3.jpg"></a>
        </li>
        <li id="4" class="content">
            <a href="#"><img src="images/work/4.jpg"></a>
        </li>
        <li id="5" class="content">
            <a href="#"><img src="images/work/5.jpg"></a>
        </li>
        <li id="6" class="content">
            <a href="#"><img src="images/work/6.jpg"></a>
        </li>
        <li id="7" class="content">
            <a href="#"><img src="images/work/1.jpg"></a>
        </li>
        <li id="8" class="content">
            <a href="#"><img src="images/work/8.jpg"></a>
        </li>
        <li id="9" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="10" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="11" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="12" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
    </ul>
</section>

的Javascript 

/*jslint maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    var filters = document.getElementById("filters"),
        anchors = filters.getElementsByTagName("a");

    function ani() {
        document.getElementById("filters").className = "filters";
    }

    filters.addEventListener("click", ani, false);

    function toggleVisibility(selectedTab) {
        var content = document.getElementsByClassName("content"),
            length = content.length,
            i;

        for (i = 0; i < length; i += 1) {
            if (content[i].dataset.category === selectedTab) {
                content[i].style.display = "inline";
            } else {
                content[i].style.display = "none";
            }
        }

    }

    anchors[0].addEventListener("click", function () {
        toggleVisibility("3");
    }, false);

}());

在jsfiddle

上

修复是为了确保所有id都是唯一的，将data-category添加到您要分组的项目中，从className .中删除filters，将{分隔{ {3}}。其他位是装饰性的，运行javscript from HTML，添加jslint，将所有javascript放在use strict中以防止全局命名空间污染。

答案 2 :(得分：-1)

不是最好的解决方案，但它适用于两个不同的类别：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="">
<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script><![endif]--> 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> 

<script type="text/javascript">
        function ani(){
            document.getElementById('filters').className ='.filters';
        }
</script>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         var content = document.getElementsByName('content');

         for(var i=0; i<content.length; i++) {
              if(content[i].className == selectedTab) {
                    content[i].style.display = 'inline';
              } else if(content[i].id == selectedTab) {
                    content[i].style.display = 'inline';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<style>
.filters
{
   position: relative; margin-top: -10px;
   animation-name: slide-down; animation-duration: 1s;
   -moz-animation-name: slide-down; -moz-animation-duration: 1s;
   -webkit-animation-name: slide-down; -webkit-animation-duration: 1s; 
}


@keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-moz-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-webkit-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}
</style>

</head>

<body>

<header>

    <div class="logo"><img class="logo" src="images/logo2.png"></div>

</header>

<section id="work">

<section id="filters" onclick="ani()">
<a href="#" onclick="toggleVisibility('3');">Web Design and Mobile Applications</a>
<a href="#">Service Design and Digital Branding</a>
<a href="#">Physical Computing</a>
<a href="#">Responsive Environments</a>
<a href="#">Data Visualisation</a>
<a href="#">Interactive Storytelling</a>
</section>

    <ul>
        <li class="1" id="3" name="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li class="2" name="content"><a href="#"><img src="images/work/2.jpg"></a></li>
        <li class="3" name="content"><a href="#"><img src="images/work/3.jpg"></a></li>
        <li class="4" name="content"><a href="#"><img src="images/work/4.jpg"></a></li>
        <li class="5" name="content"><a href="#"><img src="images/work/5.jpg"></a></li>
        <li class="6" name="content"><a href="#"><img src="images/work/6.jpg"></a></li>
        <li class="1" name="content"><a href="#"><img src="images/work/1.jpg"></a></li>
        <li class="2" name="content"><a href="#"><img src="images/work/8.jpg"></a></li>
        <li class="3" name="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li class="4" name="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li class="5" name="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li class="6" name="content"><a href="#"><img src="images/work/2.jpg"></a></li>
    </ul>

</section>

<script type="text/javascript" src="/js/retina/retina.js"></script>

</body>

</html>
相关问题
最新问题