时间戳

首页 > 解决方案 > 将 CSS 应用于第二级项目符号会更改闪亮的 tabsetPanel() 项目符号点

html - 将 CSS 应用于第二级项目符号会更改闪亮的 tabsetPanel() 项目符号点

问题描述

这实际上是我第一次在我自己的代码中使用 CSS，我在第一件事上就遇到了麻烦。我有这个非常精致的闪亮应用程序（我在学习 CSS 之前做过），我想在它上面使用这个新技能。我想做的第一件事是改变第二级的要点。因此，ui中的代码为：

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的 a内 a 内a内。事情是：物品中的物品也收到了方形子弹。通过窥探 Shiny 的 HTML，我看到了：the也是一个列表。在此处输入图像描述 tabPanel()tabsetPanel()tabPanel()navbarPage()tabsetPanel()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？

标签： htmlcssruser-interfaceshiny

解决方案

尝试使用 JS 向您的 UL 添加类：（您应该更改 js 代码中的数字“1”。这取决于您的页面上有多少 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>

推荐阅读