Блог

Это буквально мой первый раз, когда я использую CSS в своем собственном коде, и я столкнулся с проблемой буквально первым делом. У меня есть это очень проработанное блестящее приложение (я сделал его до изучения CSS), и я хочу использовать в нем этот новый навык. Первое, что я хотел сделать, это изменить второй уровень маркированных точек. Таким образом, код в пользовательском интерфейсе является:

 tags$ul(
  tags$li("1 or 2 tails. Basically, 1 tail is when the hypothesis says that one of the averages will be bigger than the other. And, 2 tails is when the hypothesis says that the averages will be different no matter which one is bigger."),
  tags$li("Grouped or paired."),
  tags$li("Grouped: when there is no special relationship between pairs of data in between the two samples. The sample size (n) for each sample does not require to be the same. For example:"),
  tags$ul(
    tags$li("Comparing the length of 30 leaves taken from the top of a tree and 32 taken from the bottom part of the tree;"),
    tags$li("Comparing male and female height between 30 males and 31 females, not necessarily related;")
  ),
  tags$li("Paired: when there is a pair relationship between samples. Typical for data taken from samples in different conditions of the same subject, or between siblings. The sample size (n) for each sample must be the sam. For example:"),
  tags$ul(
    tags$li("Comparing the length of top and bottom leaves from 30 trees;"),
    tags$li("Comparing male and female height between 30 brothers and 30 sisters;")
  )
)
  

И мой CSS — это:

 ul ul li {
  list-style-type: square;
}
  

Он отлично работает там, где я этого хочу:

Но это делает больше, чем это: этот код находится внутри a tabPanel() из a tabsetPanel() внутри a tabPanel() в a navbarPage() . Дело в том, что предметы в tabsetPanel() нем также получили квадратные пули. Заглянув в HTML-код shiny, я увидел следующее: tabsetPanel() это тоже список.

 # Show a tabset that includes a plot, summary, and
# table view of the generated distribution
mainPanel(
  tabsetPanel(
    tabPanel("Plot", plotOutput("plot")),
    tabPanel("Summary", verbatimTextOutput("summary")),
    tabPanel("Table", tableOutput("table"))
  )
)
  

 <div class="col-sm-8">
  <div class="tabbable tabs-above">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab-7055-1">
        <div id="plot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
      </div>
      <div class="tab-pane" id="tab-7055-2">
        <pre id="summary" class="shiny-text-output"></pre>
      </div>
      <div class="tab-pane" id="tab-7055-3">
        <div id="table" class="shiny-html-output"></div>
      </div>
    </div>
  </div>
</div>
  

Я также видел , что tabsetPanel() у него есть два класса: nav и nav-tabs . Поэтому я попробовал этот CSS:

 ul ul li {
  list-style-type: square;
}

.nav, .nav-tabs {
  list-style-type: none;
}
  

Сначала у меня был только один из них, но это не так. Это все еще не так.

Фиктивный пользовательский интерфейс, который обладает всеми важными характеристиками, чтобы упростить задачу, является:

 ui <- fluidPage(
  navbarPage(
    tabPanel(title = "Just to be here",
             tabsetPanel(
               tabPanel(title = "This seems to be causing some trouble...",
                        tags$ul(
                          tags$li("Text 1"),
                          tags$li("Text 2"),
                          tags$li("Text 3"),
                          tags$ul(
                            tags$li("Text 3.1"),
                            tags$li("Text 3.2")
                          ),
                          tags$li("Text 4"),
                          tags$ul(
                            tags$li("Text 4.1"),
                            tags$li("Text 4.2")
                          )
               )
             )
    )
  )
)
  

Тогда мой вопрос: как я могу применить квадратные маркеры только к фактическому списку, а не к tabPanel() s?

попробуйте добавить класс в свой UL с помощью JS: (вы должны изменить число «1» в своем js-коде. Это зависит от того, сколько ul у вас на странице.

 document.getElementsByTagName("ul")[1].classList.add("newClass");  

 .newClass li{
  list-style-type: square;
}  

 for example: 
    <ul class="nav nav-tabs"> 
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>
    
        <ul class="nav nav-tabs"> 
      <li class="active">
        <a href="#tab-7055-1" data-toggle="tab">Plot</a>
      </li>
      <li>
        <a href="#tab-7055-2" data-toggle="tab">Summary</a>
      </li>
      <li>
        <a href="#tab-7055-3" data-toggle="tab">Table</a>
      </li>
    </ul>