黑马旅游网bug之主页上《人气旅游，主题旅游，最新旅游》按钮点击发生错位问题

本文链接：https://blog.csdn.net/weixin_44922290/article/details/110405008

黑马旅游网bug之主页上《人气旅游，主题旅游，最新旅游》按钮点击发生错位问题

bug展示
在这里插入图片描述
原课程提供的源码中，点击按钮发生错位

改前代码为

					<li role="presentation" class="active">
                        <span></span>
                        <a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
                    </li>
                    <li role="presentation">
                        <span></span>
                        <a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
                    </li>
                    <li role="presentation">
                        <span></span>
                        <a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
                    </li>

经过我的反复调试和结合老师课程中所说，前端样式功能不明确只需要增删代码确认样式即可。
最后发现只需要将a标签放入span标签中即可
修改后的代码为

					<li role="presentation" class="active">
                        <span><a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a></span>

                    </li>
                    <li role="presentation">
                        <span><a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a></span>

                    </li>
                    <li role="presentation">
                        <span><a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a></span>

                    </li>

bug修复后
在这里插入图片描述