Question

我有一个带有<ul>列表的html文件：

<!DOCTYPE html>
<html lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <meta charset="utf-8">
    <title>Whitesquare</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="row">
            <a class="span2" href="/"><img src="./logo.png" alt="Whitesquare logo"></a>
            <div class="span2 offset6" id="reminders">Напоминания</div>
            <div class="span2" id="administration">Администрация</div>
        </header>
        <div class="row">
            <div class="navbar span2">
                <div class="navbar-inner">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active" id="statistics">Статистика</li>
                    <li id="LPU">ЛПУ</li> 
                    <li id="content">Состав</li>
                    <li id="add">Добавить</li>
                    <li id="addParticipant">Добавить участника</li>
                    <li id="addLPU">Добавить ЛПУ</li>
                </ul>
                </div>
            </div>
            <div id="mainContent" class="span10">
            </div>
        </div>
    </div>
</body>
</html>

其中两个是不可见的，我在javascript的帮助下添加了它们：

$(document).ready(function(){
    $("#mainContent").load("statistics.html");
    $("ul.nav-stacked> li").click(function(){
        if($(this).attr("id")!="add"){
            if($(this).attr("class")!="active"){
                $("ul.nav-stacked li").removeClass("active");
                $(this).attr("class","active");
                var contentForLoad=$(this).attr("id")+".html";
                $("#mainContent").load(contentForLoad);
            }
        }
        else{
            if(($(this).attr("class")!="active")&&($("#addParticipant").attr("class")!="active")&&($("#addLPU").attr("class")!="active")){
                $("ul.nav-stacked li").removeClass("active");
                $(this).attr("class","active");
                $("#addParticipant").css("opacity","1");
                $("#addLPU").css("opacity","1");
            }
            else{
                $("ul.nav-stacked li").removeClass("active");
                $("#addParticipant").css("opacity","0");
                $("#addLPU").css("opacity","0");
            }
        }
    });
});

由于某种原因，我有

<li class="active" id="statistics">option1</li>
<li id="LPU">option2</li> 
<li id="add">add</li>
<li id="addParticipant">add option1</li>
<li id="addLPU">add option2</li>

在1列中没问题，但是当我在顶部添加option3时：

<li class="active" id="statistics">option1</li>
<li id="LPU">option2</li>
<li>option3</li> 
<li id="add">add</li>
<li id="addParticipant">add option1</li>
<li id="addLPU">add option2</li>

option2和option3在一个字符串中。可能是什么原因？ enter image description here

无法将<li>元素列表放在一列</li>中

0 个答案: