html php tab滑动标签想获取li标签里面的内容

Question

<div class="roofBox">

    <!-- 顶部标题 -->
    <ul class="navTitle barStyle">
        <li class="active">公司简介</li>
        <li>公司文化</li>
        <li>发展历程</li>
        <li>业务架构</li>
        <li>行业范围</li>
        <li>主要客户</li>
        <li>合作伙伴</li>
        <li>测试测试</li>
    </ul>
    <!-- 标题对应内容 -->
    <div class="boxbk">
        <ul>
            <li>
                <div class="boxbk-box">
                    <div class="boxbk-left">
                        <p>想要上面文字内容</p>
                        <span></span>
                    </div>
                    <div class="boxbk-right">

                    </div>
                </div>
            </li>

        </ul>
    </div>

</div>
<!-- 引入js库 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        // 为类名navTitle下的所有li添加点击事件
        $(".navTitle").on("click", "li", function() {
            // 设置下标为当前点击的下标
            let index = $(this).index();
            // 点击时为类名（active）添加样式，同时利用siblings方法清除其他同级样式
            $(this).addClass("active").siblings().removeClass("active");
            // 让其显示或者隐藏
            $(this).parents(".roofBox").find(".boxbk ul li").eq(index).show().siblings().hide();
        })
    })
</script>

这是个滑动导航，我想要点击.公司简介 让后下面显示文字就显示为公司简介！点击主要客户就显示主要客户！这个怎么写！！求教

Answer 1

这样吗 😂
Codepen

Answer 2

你的点击事件里，$(this)就是当前选中的li标签，直接text()方法即可：

const text = $(this).text();

Answer 3

const $e = $('...')
$('.navTitle > li').on('click', function() {
    $e.text($(this).text())
})

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

<script type="text/javascript">
    $(function() {
        // 为类名navTitle下的所有li添加点击事件
        $(".navTitle").on("click", "li", function() {
            // 设置下标为当前点击的下标
            let index = $(this).index();
            // 点击时为类名（active）添加样式，同时利用siblings方法清除其他同级样式
            $(this).addClass("active").siblings().removeClass("active");
            // 让其显示或者隐藏
            $(this).parents(".roofBox").find(".boxbk ul li").eq(index).show().siblings().hide();

            //加这行
            $(".boxbk-left>p").html($(this).text());
        })
    })
</script>