0

我有一系列无序列表。每个 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>
4

3 回答 3

2

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

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

例如，您可以：

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

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

于 2013-06-17T23:21:14.720 回答
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 上

修复是确保所有ids 都是唯一的，添加data-category到要分组的项目，.从 className中删除 ，从 HTMLfilters中分离javscript。其他部分是装饰性的，通过jslint运行，添加use strict，将所有 javascript 放在一个自执行闭包中，以防止全局命名空间污染。

于 2013-06-18T00:43:57.173 回答
-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>
于 2013-06-17T23:28:57.083 回答