标签: html-lists

太长了看了.
这是我的Gallery脚本的核心.这看起来比实际上更复杂..但是我缺乏JQuery(Javascript)知识我无法自己编程.大多数javascript只是伪的,所以如果你可以将伪javascript翻译成实际有效的javascript(Jquery),那就好了.

我有一个展示大图像的画廊.我有一个缩略图列表,其中包含用户可以单击以在图库图像之间导航的一些拇指图像.我有一个信息池.它的列表包含Gallery的所有大图像.图库从此信息池中获取其信息. - 在一些动画问题中我使用了一个看不见的池.

HTML

<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
</ul>
</div>

<div id="thumbs">
<ul>
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery-->
<li>Thumb 2</li>
<li>Thumb 3</li>
<li>Thumb 4</li>
</ul>
</div>

<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes -->
<ul> <--! This list is the information pool which stores the big pictures of the gallery-->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li> …

这可能已经得到了回答,我已经知道这应该如何工作,但由于某种原因,它不是.我想这可能是我如何循环元素.

$(document).ready(function() {
     var element = '#gallery ul#gallery-container';
 var idx=0;
 var timeout = 3000;
 var number =  $(element + ' li').length;

function changeSlide() {

    $(element + ' li:eq(' + idx + ')').fadeOut();

    idx = idx + 1;

    if (idx == number) {
        idx=0;
    }

    $(element + ' li:eq(' + idx + ')').fadeIn().delay(timeout).delay(0,   function() {
        changeSlide();
    });;

}

 $(element + ' li').hide();

 $(element + ' li:first').fadeIn().delay(timeout).delay(0, function() {
    changeSlide();
 });
});

然后列表是这样的:

<div id="gallery">
    <ul id="gallery-container">
        <li><img src="media/images/screen-shot-02.jpg" width="173" height="258" alt=" …

这个问题是关于ListItems的突出显示.

我通过使用以下类突出显示列表项.

ul.category_list li {
  background: none repeat scroll 0 0 #B73737;
  border-bottom: 1px solid #CCCCCC;
  color: #953131;
  display: block;
  height: 29px;
  width: 242px;
}

ul.category_list li a:link,ul.category_list a:visited { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #fff; text-decoration: none; color: #666; }

    ul.category_list li a:hover { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5 url(../images/disc_apps/nav_over.jpg) no-repeat; text-decoration: none; color: #666; }

    ul.category_list li a:active { 
        display: block; width: 227px; …

我有一个使用 jquery 滚动的列表。我想在 li 中有两个单独的 div，以便它们一起滚动，但是除非被函数调用，否则一个是隐藏的。 例如：

<ul id="scrollul">
  <li id="item1" class="active">
     <div>1</div>
     <div style="display:none;">2</div>
  </li>
</ul>

我正在解析 XML 文档并使用它创建 HTML 列表。我遇到过一种情况，我需要从 XML 数据中创建一个多级列表。例如：

1. One
2. Two
  2.1. Three
  2.2. Four
    2.2.1. Five
    2.2.2. Six
  2.3. Seven
3. Eight

是否可以最好使用 HTML 创建这样的结构<ul>-<li>s？我遇到过一些建议在 CSS 中使用的解决方案counter-incretemnt, counter-reset，但问题是由于 XML 的结构，这种解决方案对于我的情况不可行，而且使用 XSLT 编写它会非常困难。

谁能建议我解决这个问题？

注意：列表的级别没有限制！

提前谢谢！

编辑：为上述所需的 HTML 列表添加示例 XML：

<ele lvl="0">
  One
</ele>
<ele lvl="0">
  Two
</ele>
<ele lvl="1">
  Three
</ele>
<ele lvl="1">
  Four
</ele>
<ele lvl="2">
  Five
</ele>
<ele lvl="2">
  Six
</ele>
<ele lvl="1">
  Seven
</ele>
<ele lvl="0">
  Eight
<ele>

我有border-bottom我 li的，但我有padding-left:10px我的ul，所以它会将所有内容向右微移 10 像素。

我想知道是否有可能将边界移回左侧？或者这是不可能的，因为边界是 的一部分ul？

html

<ul class="menuoptions">
<li>Home</li>

<li>Firewalls</li>

<li>SSL VPN Encryption</li>

<li>Security In Education</li>

<li>Wireless Access Points</li>
</ul>

CSS

.menuoptions {
    position:relative;
    height:30px;
    width:225px;
    color:#666;
    line-height:40px;
    font-weight:bold;
    padding-left:10px;
    margin-top:-10px;
    top:10px;
    list-style:none;

}

.menuoptions li {
    border-bottom:solid 1px #ccc;       
}

小提琴

请看看这个:

这是我的HTML:

    <nav id="mainNav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Our Projects</a></li>
            <li><a href="team.html">Our Team</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

而我的css:

#mainNav ul li {
    padding-left: 10px;
}

#mainNav ul li:hover {
    background-color: rgba(0,0,0,.2);
    color: #fff;
    cursor: pointer;
}

仅当我将光标放在文本链接上方并单击时,才会激活链接.我想能够点击较暗的"li"背景中的任何地方并激活相应的链接.这怎么可能？

关于<nav>HTML5 标签。

这有什么区别：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Photos</a></li>
  <ul>    
 </nav>

这：（这可以工作吗？）

<nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Photos</a></li>
 </nav>

我有一个带有项目符号的无序列表，但我想要第一个li没有项目符号的列表，我不知道如何才能只有一个项目没有项目符号

<ul>
    <li class="no_bullet"> item 0 </li>
    <li>item 1 </li>
    <li>item 2 </li>
    <li>item 3 </li>
</ul>

我有一个列表（单击小提琴）：

  <ul class="list-items" :style="styleObject">
    <li v-for="(item, index) in listItems" :key="index">
      <span v-if="index != 0">, </span><span>{{ item.name }}</span>
    </li>
  </ul>

<style lang="scss" scoped>
.list-items {
  display: inline-flex;
}
ul {
  list-style-type: none;
}
</style>

它看起来像这样：

这在桌面上很棒，但是当屏幕变小时，单词会被打乱而不是转到下一行：

我想要的是，每当最后一个单词超过屏幕宽度时，它就会转到下一行，这样我的列表就不会像上图那样乱七八糟，我该怎么做？

注意 不确定它是否重要，但class="list-items"在具有以下样式的 div 中：

display: flex;
align-items: center;`