[求助]实现二级导航菜单出现问题，求帮忙解决

pandongxia 2017-08-20 12:01:39
想实现https://mybb.com/中导航菜单的效果。当点其它链接时，其它菜单也是选中的效果。
目前实现的效果是这样的http://www.bestcraftsman.cn/index.php 。
问题1： 点击其它菜单后，链接跳转了。 但是选中的还是“门户”， 给其它链接加的类没有生效。
问题2： 点“家里论坛”时，子菜单不在正下方，向右偏移了，不知怎么回事。
html 代码如下


<nav id="mainmenu">

	<ul class="">

		<li class="selected">							

			<a href="{$mybb->settings['bburl']}/portal.php">门户</a>

		</li>

		<li>

			<a href="{$mybb->settings['bburl']}/index.php">论坛首页</a>

		</li>

		<li class="drop-down">

			<a href="#">家电论坛</a>

		        <ul>

				<li class="submenu">

					<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=72">空调论坛</a>

				</li>

				<li class="submenu">

					<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=89">冰箱论坛</a>

				</li>

				<li class="submenu">

					<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=85">洗衣机论坛</a>

				</li>

				<li class="submenu">

					<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=69">抽油烟机论坛</a>

				</li>

				<li class="submenu">

					<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=82">燃气灶论坛</a>

				</li>

				<li class="submenu">

						<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=93">太阳能热水器论坛</a>

				</li>

				<li class="submenu">

						<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=75">壁挂炉论坛</a>

				</li>

				<li class="submenu">

						<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=78">电视机论坛</a>

				</li>

			</ul>

			</li>

			<li>

				<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=59">水电木瓦漆论坛</a>

			</li>

			<li>

				<a href="{$mybb->settings['bburl']}/forumdisplay.php?fid=1">保洁论坛</a>

			</li>

		</ul>

</nav>


CSS代码如下


nav#mainmenu {

	margin: 0;

	padding: 0;

	list-style: none;

	margin-bottom: -4px;

	font-size: 1.1em;

	clear: right;

	position: relative;

	/*margin-left: 255px*/

}



nav#mainmenu ul{

	text-align: right;

	margin: -10px 5px 0 0;

}

nav#mainmenu ul li {

	/*display: inline-block;

	margin: 0 1px*/

	margin: 0 7px;

	display: inline-block;

}



nav#mainmenu ul li a {

	padding: 4px 10px 6px;

	display: block;

	text-decoration: none;

	border-bottom: 4px solid #3a3a3a;

	font-weight: bold;

}



nav#mainmenu ul li a:hover {

	border-bottom: 4px solid #ff7500;

	color:#ff7500;

	font-weight: bold;

}



nav#mainmenu ul li.selected a {

	color: #000;

	font-weight: bold;

	border-bottom: 4px solid #ff7500

}



nav#mainmenu ul li ul {

	font-weight: 300;

	display: none;

	position: absolute;

	width: 140px;

	z-index: 999;

	background-color: #ffffff;

}



nav#mainmenu ul li ul li {

	list-style:none;

	display: list-item;

	float: none;

	line-height: 30px;

	text-align: center;

	/*padding:0;*/

}



nav#mainmenu ul li ul li a {

	width: 100%;

}

/*nav ul li ul li a:hover{ background-color:#06f;} */



nav#mainmenu ul li:hover>ul {

	display: block;

}


javascript代码


<script>

$(function(){

	var cotrs =$("#mainmenu li a");

	cotrs.click(function(){

								//cotrs.removeClass("selected"); 

		$(this).parent().addClass("selected").siblings().removeClass("selected");;

		return true;

	});

});

</script>



请高手们帮忙看看怎么解决。
...全文
303 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
霜月枫桥 2017-08-23
  • 打赏
  • 举报
 回复
上面的写错了，是下面这个 
$("#mainmenu ul li").click(function(){
            $("#mainmenu ul li").attr('class','');
            $(this).attr('class','selected');
        });
将它放在$(function(){ });中
霜月枫桥 2017-08-23
  • 打赏
  • 举报
 回复
引用 3 楼 pandongxia 的回复:
第二个问题解决了，请高手们帮忙看看第一个问题。 问题其实是： 当跳转到某个选项时，这个选项应该有个class="selected"。 但是目前的代码好像跳转后，还是只有“门户”有class="selected"。 给其他选项增加类并不成功。
要是有问题的话，你应该引用一下我的回答，要不然我看不见你的回复， 因为我没有你这里的JS代码，所以只能大体写一下，你试试 
    $("#mainmenu ul li").click=function(){
        $("#mainmenu ul li").attr('class','');
        $(this).attr('class','selected');
    }
把它写在jQuery中
pandongxia 2017-08-23
  • 打赏
  • 举报
 回复
引用 7 楼 MOONCOM 的回复:
那就为目录的每个<li>设一id，然后<a href="http://www.bestcraftsman.cn/portal.php">门户</a>的链接上加上参数，js中截取参数，从而获取当前访问目录的id，从而设置该li为selected
谢谢！ 我是对url进行字符串解析的，这样做的， 感觉比较笨，但是可以工作。 $("#navmenu1").removeClass("selected"); var url = window.location.href; var suburl=url.split('/'); var suburl1 = suburl[3]; var suburl2 = suburl1.substr(0,5); if (suburl2 == "index") { $("#navmenu2").addClass("selected"); } else if (suburl2 == "porta"){ $("#navmenu1").addClass("selected"); } else{ var suburl3 = suburl1.split('='); var suburl4 = suburl3[1]; if (suburl4 == '1'){ $("#navmenu5").addClass("selected"); }else if (suburl4 == '59'){ $("#navmenu4").addClass("selected"); }else{ $("#navmenu3").addClass("selected"); } }
霜月枫桥 2017-08-23
  • 打赏
  • 举报
 回复
那就为目录的每个<li>设一id，然后<a href="http://www.bestcraftsman.cn/portal.php">门户</a>的链接上加上参数，js中截取参数，从而获取当前访问目录的id，从而设置该li为selected
pandongxia 2017-08-23
  • 打赏
  • 举报
 回复
引用 5 楼 MOONCOM 的回复:
上面的写错了，是下面这个 
$("#mainmenu ul li").click(function(){
            $("#mainmenu ul li").attr('class','');
            $(this).attr('class','selected');
        });
将它放在$(function(){ });中
因为<li class="selected"> <a href="http://www.bestcraftsman.cn/portal.php">门户</a> </li> 中的href， 网页一刷新，增加的selected就无效了。
pandongxia 2017-08-21
  • 打赏
  • 举报
 回复
第二个问题解决了，请高手们帮忙看看第一个问题。 问题其实是： 当跳转到某个选项时，这个选项应该有个class="selected"。 但是目前的代码好像跳转后，还是只有“门户”有class="selected"。 给其他选项增加类并不成功。
pandongxia 2017-08-21
  • 打赏
  • 举报
 回复
第一个问题是，如果点论坛首页的话，链接跳转了，但是focus(选择的条目)还在门户上
霜月枫桥 2017-08-21
  • 打赏
  • 举报
 回复
你的问题一没看懂，
问题二如下修改：
下面的CSS注释掉
nav#mainmenu ul li ul li a {
/* width: 100%; */
}

nav#mainmenu ul li ul 中添加一条属性padding-left: 0px;

修改后的样子如下所示：
JavaScript技术
● &运算符_1.htm● ·JavaScript的脆弱性_1.htm● ·JavaScript技巧环绕三维文字_1.htm● ·JavaScript时间显示三大心法_1.htm● ·Javascript...--JavaScript的使用_1.htm● ·第八讲WEB页面信息交互_1.htm● ·第二
5.20爬虫结——Mu
3856535,主题自带的二级导航怎么修改啊,2578089 3856505,以前有农场这些插件能安装，现在没了吗？,1515035 3856513,请问这个网站用的是什么应用程序,3140310 3856515,萌新想问一下，能否可以实现现在主流素
discuz_result
命名 discuz_result ...3852724,最新版墨镜风格模板发布了，有需要的朋友可以进来看看,...3856535,主题自带的二级导航怎么修改啊,2578089 3856505,以前有农场这些插件能安装，现在没了吗？,1515035 3856513,请问这个网站
华联招聘网站设计与实现-附源码011229
华联招聘网站采取Mysql作为后台数据的主要存储单元，运用软件工程原理和开发方法，采用node.js的koa技术构建的一个管理系统，实现了本系统的全部功能。完成系统的主要模块的页面设计和功能实现。本文展示了首页页面...
我在CSDN参与的3000个帖子
2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章