添加的jquery数据报警器及其css会影响页面的其他部分。
添加的jquery数据报警器及其css会影响页面的其他部分。
提问于 2016-10-20 19:03:45
我正在使用基金会6来制作一个ajax驱动的站点。索引页使用off画布和选项卡进行导航。但是，当我添加jquery小部件和相应的css时，它会对导航条的外观产生不利影响。
我没有在我的导航源代码中引用ui类，而是将它们放到服务版本中。
例如：
源代码片段：
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>但萤火虫显示：
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="select-sections" aria-selected="false" aria-expanded="false">
<a id="select-sections" class="hollow button secondary disabled ui-tabs-anchor" href="#tabs-2" data-open="offCanvasLeft" role="presentation" tabindex="-1" aria-expanded="false" aria-controls="offCanvasLeft"> §§ </a>
</li>显然，当我为datepicker小部件添加CSS时，它使用的是我从未打算在菜单上使用的css样式。我真的不希望它在我的代码中添加诸如“ui状态-默认”和“ui-角落顶部”之类的内容。
我可以看到解决这个问题的两种可能的方法，就是不知道如何解决：
- 以某种方式防止ui-*类添加到我的导航中
- 使css只应用于数据报警器。
如果有帮助，下面是一个简化的清单
<body>
<div class="full-height">
<div id="topbar" class="top-bar">
<div class="top-bar-title"> The site title... </div>
<div>
<div id="top-bar-left-content" class="top-bar-left"></div>
<div id-"top-bar-right-content" class="top-bar-right">
<form>
<ul class="logged_in menu">
<li>Date: </li>
<li><input type="text" id="datepicker" name="today" value="<%= @today %>"></li>
<li><input class="button primary" type="submit" value="Change Date"></li>
<li><button id="select-help" class="button primary">Help</button></li>
</ul>
</form>
</div>
</div>
</div>
<span id="notice"><%= notice %></span>
<!-- wrap entire document (2 divs) -->
<div class="off-canvas-wrapper container"><div class="off-canvas-wrapper-inner fill" data-off-canvas-wrapper>
<!-- tabs wrap around off-canvas and off-canvas data. using .tabs class distorts display. -->
<div id="tabs" class="fill ">
<!-- off canvas left (hidden) part -->
<div id="offCanvasLeft" class="off-canvas position-left fill" data-off-canvas data-close-on-click=false>
<!-- tabs content -->
<aside>
<div id="tabs-1">A list of links...</div>
<div id="tabs-2">A list of links...</div>
<div id="tabs-3">A list of links...</div>
<div id="tabs-4">A list of links...</div>
<div id="tabs-5">A list of links...</div>
</aside>
</div><!-- end off canvas left -->
<!-- rest of the page (on canvas) -->
<div id="left-scroll" class="off-canvas-content rows fill" data-off-canvas-content>
<!-- sidebar icons. these select the tab to display -->
<ul id="sidebar-closed" class="menu vertical sidebar-closed">
<!-- toggle sidebar -->
<li id="toggle-oc">
<a class="hollow button secondary" data-toggle="offCanvasLeft">
<i id="toggle-menu" class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
<!-- search -->
<li>
<a id="select-search" href="#tabs-3" class="hollow button secondary is-active" data-open="offCanvasLeft">
<i class=" fa fa-search" aria-hidden="true"></i>
</a>
</li>
<!-- part list -->
<li>
<a id="select-parts" href="#tabs-1" class="hollow button secondary" data-open="offCanvasLeft">
<i class=" fa fa-list" aria-hidden="true"></i>
</a>
</li>
<!-- section list -->
<li>
<a id="select-sections" href="#tabs-2" class="hollow button secondary disabled" data-open="offCanvasLeft">
§§
</a>
</li>
<!-- letter list -->
<li>
<a id="select-letters-list" href="#tabs-4" class="hollow button secondary disabled" data-open="offCanvasLeft"><!-- data-pushstate="/sidebar_actions/letters" -->
<i class=" fa fa-files-o" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- main window content -->
<main>
links in the tabs are displayed here
</main>
</div><!-- rest of page (on canvas) wrapper -->
</div> <!-- tabs wrapper -->
</div></div> <!-- outer 2 off-canvas wrappers -->
</body>并且css通过application.css.scss加载：
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*= require jquery-ui/datepicker
*= require font-awesome
*/回答 1
Stack Overflow用户
发布于 2016-10-21 20:08:25
我使css只应用于datepicker小部件。对于Ror：
- 使用firebug确定包装div的
id。 - 使用jQuery下载生成器生成所需的CSS。将
id从步骤1添加到CSS Scope输入。 - 从
*= require jquery-ui/datepicker中删除application.css.scss - 在app/assets/样式表中创建新文件并粘贴生成的样式表
- 将对
url(images/*的任何引用更改为url(/images/* - 将所需图像复制到公众/图像/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40162554
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号