`
mengjiaoyao
  • 浏览: 30010 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

给网站加入样式切换功能

CSS 
阅读更多

//动态引入js文件==换样式的
var cookie_skin = getCookie("n-soft-css"); 
if (cookie_skin) {
var doc = document;
switchSkin(cookie_skin,doc);
}
function switchSkin(skinName,doc){  
var style = doc.createElement("link");
style.href = "/ntrain/Skin/"+skinName+".css";
style.rel = "stylesheet";
style.type = "text/css";
doc.getElementsByTagName("HEAD").item(0).appendChild(style);
}

function switchSysSkin(skinName){
    //Top
var TopDoc = parent.document.frames['Top'].document;
//Left
var LeftDoc = parent.document.frames['Main'].frames['Left'].document;
//Right
var RigDoc  = parent.document.frames['Main'].frames['Right'].document;
//Bottom
var BotDoc = parent.document.frames['Buttom'].document; 
switchSkin(skinName,TopDoc);
switchSkin(skinName,LeftDoc);
switchSkin(skinName,RigDoc);
switchSkin(skinName,BotDoc);
setCookie("n-soft-css",skinName);
}


将以上部分放到一个js文件里边在每个页面中加入即可。。
分享到:
评论

相关推荐

    js导航切换样式

    3. **样式切换**:`.css()`方法用于直接设置样式,`.toggleClass()`则可以切换类名,实现高亮效果。 4. **动画效果**:`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等函数,提供流畅的动画过渡。 5. **链式操作**:...

    jQuery+CSS实现简单的显示切换功能,点击按钮切换样式显示

    本教程将详细讲解如何使用jQuery和CSS实现一个简单的显示切换功能,即通过点击按钮来改变元素的样式,展示或隐藏特定内容。 首先,我们需要在HTML文档中设置基础结构。创建一个按钮元素,以及需要切换显示状态的...

    jQuery制作控制css样式表切换各个样式表

    此外,还可以扩展此功能,比如添加过渡动画,使得样式切换更加平滑。这可以通过使用jQuery的动画函数和CSS3的过渡效果实现。总之,jQuery为我们提供了强大且便捷的方式来控制CSS样式表的切换,极大地提升了用户体验...

    通过js切换样式,3种样式选择

    这样,当样式切换时,页面的改变将会平滑进行,而不是瞬间跳转,增加了视觉的流畅性。 在压缩包文件"3style"中,可能包含了实现这个功能的HTML、CSS和JavaScript文件,你可以下载并查看这些文件以获取完整的示例...

    通过按钮点击实现css样式切换--模仿百度有啊

    以上就是实现“通过按钮点击实现CSS样式切换”的核心步骤,通过这种方式,你可以为用户提供更丰富的视觉体验,同时增加网站的互动性和趣味性。在实际开发中,可以依据具体需求调整和优化这些技术,以满足各种复杂...

    div CSS样式表实现中英文双语切换导航条

    可以添加一个按钮触发切换,如: ```html ()">切换语言 ``` 然后编写JavaScript函数: ```javascript function toggleLanguage() { var zhNav = document.querySelector('.nav.zh'); var enNav = document....

    QT样式表45套,带Demo及样式表,一键切换

    "一键切换"功能意味着这个Demo提供了一种简便的方式,让用户或开发者能够在不同样式之间快速切换,无需每次都重新编译或修改代码。这对于测试和选择最合适的界面风格非常有用,特别是在开发过程中需要频繁调整UI设计...

    web css实现整站样式切换

    在Web开发中,为用户提供...通过以上步骤和知识点,你可以实现一个功能完善的Web站点样式切换功能,给用户提供更个性化的浏览体验。在实际开发中,还可以结合现代前端框架(如React、Vue等)进一步提升效率和用户体验。

    CSS3样式的按钮切换选择类

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了更多强大的样式控制功能,使得网页元素的外观和交互更加丰富。本主题聚焦于“CSS3样式的按钮切换选择类”,这是一个专用于创建具有实体按钮效果的类库。通过这...

    网站风格适时随意切换JS+CSS高级版

    在实现风格切换功能时,JS可以监听用户的行为(如点击按钮),并动态地修改或加载新的CSS文件,从而改变页面的样式。 实现网站风格切换的步骤通常如下: 1. **创建CSS样式表**:首先,我们需要编写多个CSS文件,每...

    C# 标签切换代码,经典样式

    在本主题中,“C# 标签切换代码,经典样式”指的是使用C#实现的一种具有经典外观和感觉的标签切换功能。 首先,让我们理解标签切换的基本概念。在Web开发中,这通常通过JavaScript库如jQuery实现,但在C#环境下,...

    js实现的图片切换功能

    在JavaScript(JS)中实现图片切换功能是一项常见的前端任务,主要应用于网站的幻灯片、轮播图等组件。这个功能通常需要结合HTML结构、CSS样式以及JavaScript代码来完成。以下是一个详细的步骤介绍: 首先,我们...

    vue实现样式之间的切换及vue动态样式的实现方法

    Vue 实现样式之间的切换是指在 Vue 项目中实现不同的样式之间的切换,例如导航栏的样式切换功能。这种方式可以通过 Vue 的动态样式实现方法来实现。下面将详细介绍 Vue 实现样式之间的切换及 Vue 动态样式的实现方法...

    tab标签样式简洁banner图片切换.zip

    "tab标签样式简洁banner图片切换.zip"是一个典型的网页元素示例,它涉及到了JavaScript特效的实现,特别是针对网页上的标签页切换和图片轮播功能。这个压缩包包含了一系列文件,如说明.htm、index.html、css、images...

    Jquery switcher样式表切换插件css样式表切换实现

    在网页设计和开发中,jQuery...同时,开发者可以通过调整样式表内容,快速实现页面主题的切换,极大地提高了网站的可定制性。在实际项目中,可以根据具体需求对这个插件进行适当的扩展和优化,以满足更复杂的功能需求。

    jQuery带tab切换搜索框样式代码

    本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框,该搜索框集成了选项卡切换功能,为用户提供更便捷的交互体验。以下是对这个主题的详细讲解: 1. **jQuery基础**:首先,...

    tab标签样式图片幻灯片切换效果.zip

    在网页设计中,"tab标签样式图片幻灯片切换效果"是一种常见的用户界面元素,它提供了优雅的方式来展示多组内容,特别是当内容是图像时。这个压缩包文件包含了一套实现这种效果的完整资源,包括HTML、CSS和JavaScript...

    jQuery图片九宫格样式布局图片切换-20130625

    在2013年的一篇博客《jQuery图片九宫格样式布局图片切换》中,作者XJWolaile详细介绍了如何利用jQuery库实现这一功能,下面将对此进行深入解析。 首先,要创建九宫格布局,我们需要一个包含九个元素的HTML结构,...

    jQuery很漂亮的标签切换样式

    这个"jQuery很漂亮的标签切换样式"是一个示例,展示了如何利用jQuery来创建吸引人的用户体验,尤其是对于企业网站,这样的标签切换功能可以有效组织内容,提高用户导航效率。 首先,我们来理解“标签切换”的概念。...

    Table切换功能.rar

    "Table切换功能"指的是通过交互方式改变表格显示的内容或样式,以满足不同场景下的需求。这种功能常见于数据量大或者有多种展示模式的网页中。在本案例中,我们关注的是使用JQuery(简称JQ)实现这一功能。 JQuery...

Global site tag (gtag.js) - Google Analytics