0

一連の順序付けられていないリストがあります。各 li には、特定のカテゴリ (カテゴリ 1 または 2 など) の ID があります。

ユーザーが特定のIDを持つlisのみを表示できるJavascriptメソッドがあります。ただし、いくつかのリスに複数のIDを持たせたいと思っています。

たとえば、カテゴリとプロジェクトがあります。プロジェクトは、複数のカテゴリに属する​​ことができます。HTML と JS でこれを説明するにはどうすればよいですか? 私は 1 つの 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ページ上で一意である必要があり、どの要素も 1 つしか持つことができません。

ただし、1 つの要素に複数のクラスを設定でき、特定のクラスに CSS を関連付ける必要はありません。

たとえば、次のようにすることができます。

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

ここで、.green緑色のテキストを設定し、他のクラスは<li>

于 2013-06-17T23:21:14.720 に答える