使用discuz建站，门户用的自定义模板，公共头部的导航如何设置选中状态？ 悬赏3元 已结束
使用discuz建站，门户用的自定义模板，公共头部的导航如何设置选中状态？代码如下：
<ul class="main-nav">
<li id="home-box" class="active"> （class="active"就是添加背景色的）
<a href="">
<i class="home"></i>
<span>网站首页 Home</span>
</a>
</li>
<li class="">
<a href="">
<i class="icon1"></i>
<span>服务项目 Project</span>
</a>
</li>
<li class="">
<a href="">
<i id="anli2"></i>
<span>精品案例 Case</span>
</a>
</li>
</ul>
如何实现点击“服务项目”能够有背景色，网站首页的背景色就自动取消？
<ul class="main-nav">
<li id="home-box" class="active"> （class="active"就是添加背景色的）
<a href="">
<i class="home"></i>
<span>网站首页 Home</span>
</a>
</li>
<li class="">
<a href="">
<i class="icon1"></i>
<span>服务项目 Project</span>
</a>
</li>
<li class="">
<a href="">
<i id="anli2"></i>
<span>精品案例 Case</span>
</a>
</li>
</ul>
如何实现点击“服务项目”能够有背景色，网站首页的背景色就自动取消？
3 人参与回答
楼上的方法你可以试一试，不行就找个技术解决
<script src=""></script>
<style>
#list li a{background-color:blue}
</style>
</head>
<body>
<ul id="list">
<li><a>a标签</a></li>
<li><a>b标签</a></li>
<li><a> c标签</a></li>
</ul>
<script>
$(function(){
$("#list li a").on("click",function(){
$("#list li a").css("background-color","blue");
$(this).css("background-color","yellow");
})
});
</script>
这个一段JS 的颜色自己选择 网上有
那是用JS控制的
<script type="text/javascript">
$('#zixunNav li').click(function () {
$('#zixunNav li').removeClass('active');
$('.tab_pane').removeClass('active');
$(this).addClass('active');
//获取要激活的id
var id = '#' + $(this).children('a').data('tab');
$(id).addClass('active');
});
//白色导航栏固定到顶部
$(document).on('scroll', function () {
var scrollTop = $('body').scrollTop() || $('html').scrollTop(), //滚动高度
offsetTop = $('.fixed_nav')[0].offsetTop;
//滚动到右侧栏下边空白部分的时候显示
if (scrollTop > offsetTop) {
$('.zx_').addClass('fixed');
} else {
$('.zx_').removeClass('fixed');
}
});
$(function () {
$('#zixunNav li').removeClass('active');
$('.tab_pane').removeClass('active');
var tab = 'gwzx';
var liid = '#li' + tab;
var id = '#' + tab;
$(liid).addClass('active');
$(id).addClass('active');
});
var xls = gwzx = bh = pp = cs = bld = zyd = 1, ajaxurl = "/Web/News_";
$('#addMorexls').click(function () { xls++; loadData('zixun_xls', 'xls', xls, ajaxurl); });
$('#addMoregwzx').click(function () { gwzx++; loadData('zixun_gwzx', 'gwzx', gwzx, ajaxurl); });
$('#addMorebh').click(function () { bh++; loadData('zixun_bh', 'bh', bh, ajaxurl); });
$('#addMorepp').click(function () { pp++; loadData('zixun_pp', 'pp', pp, ajaxurl); });
$('#addMorecs').click(function () { cs++; loadData('zixun_cs', 'cs', cs, ajaxurl); });
$('#addMorebld').click(function () { bld++; loadData('zixun_bld', 'bld', bld, ajaxurl); });
$('#addMorezyd').click(function () { zyd++; loadData('zixun_zyd', 'zyd', zyd, ajaxurl); });
</script>
