Question

在以下标记中，不更改它或使用JS，实现行为以仅显示ul的{{1}}元素在第一个div中点击的名称（{{1}之前}}）。名称是ul中div的内容，与您要显示的li中的第一个ul的内容相匹配。具有li的元素只是填充物，对问题毫无意义。

＆＃13;

ul

＆＃13;

{content}

＆＃13;

这个问题确实有解决方案，对我来说非常有趣，所以我决定在这里发帖，即使它不太实用。

以下实现解决了几乎解决问题的方法，但它没有显示＆＃34;收藏夹＆＃34;如果首先单击div > ul:target{ display: block; } div > ul{ display: none; }，则返回元素。那么，有没有办法只用CSS添加这个功能？

Answer 1

只有CSS才能做到这一点。因为该元素需要 id 。

改变这个：

<ul class="favorites">

到此：

<ul id="favorites" class="favorites">

＆＃13;

div > ul:target{
   display: block;
}

div > ul{
   display: none;
}

＆＃13;

<ul>
  <li class="head"><a href="#favorites">Favourites</a></li>
  <li><a href="#breakfasts"><i>Breakfasts</i></a></li>
  <li><a href="#dinners"><i>Dinners</i></a></li>
  <li><a href="#suppers"><i>Suppers</i></a></li>
</ul>
<div>
    <ul id="breakfasts">
       <li class="head">Breakfasts</li>
       <li>{Breakfast 1}</li>
       <li>{Breakfast 2}</li>
       <li>{Breakfast 3}</li>
    </ul>
    <ul id="dinners">
       <li class="head">Dinners</li>
       <li>{Dinner 1}</li>
       <li>{Dinner 2}</li>
       <li>{Dinner 3}</li>
    </ul>
    <ul id="suppers">
       <li class="head">Dinners</li>
       <li>{Supper 1}</li>
       <li>{Supper 2}</li>
       <li>{Supper 3}</li>
    </ul>
    <ul id="favorites" class="favorites">
       <li class="head">Favourites</li>
       <li>{Favourite 1}</li>
       <li>{Favourite 2}</li>
       <li>{Favourite 3}</li>
    </ul>
</div>

＆＃13;

但，如果您必须保留当前的HTML格式，则需要通过JavaScript添加 id ：

＆＃13;

var favs = document.getElementsByClassName("favorites");
favs[0].setAttribute('id', 'favorites');

＆＃13;

div > ul:target{
   display: block;
}

div > ul{
   display: none;
}

＆＃13;

<ul>
  <li class="head"><a href="#favorites">Favourites</a></li>
  <li><a href="#breakfasts"><i>Breakfasts</i></a></li>
  <li><a href="#dinners"><i>Dinners</i></a></li>
  <li><a href="#suppers"><i>Suppers</i></a></li>
</ul>
<div>
    <ul id="breakfasts">
       <li class="head">Breakfasts</li>
       <li>{Breakfast 1}</li>
       <li>{Breakfast 2}</li>
       <li>{Breakfast 3}</li>
    </ul>
    <ul id="dinners">
       <li class="head">Dinners</li>
       <li>{Dinner 1}</li>
       <li>{Dinner 2}</li>
       <li>{Dinner 3}</li>
    </ul>
    <ul id="suppers">
       <li class="head">Dinners</li>
       <li>{Supper 1}</li>
       <li>{Supper 2}</li>
       <li>{Supper 3}</li>
    </ul>
    <ul class="favorites">
       <li class="head">Favourites</li>
       <li>{Favourite 1}</li>
       <li>{Favourite 2}</li>
       <li>{Favourite 3}</li>
    </ul>
</div>

＆＃13;

仅使用CSS隐藏元素

1 个答案: