Question

当我尝试在此image

上给出的菜单顶部中从左向右或其他方式滚动时

这里的问题是，在移动设备中它不会那样工作点击它后滚动到其他地方但在网络中它完美地工作我已经完成的HTML在下面给出

<div id="Default" class="contentHolder">
    <div class="content cd-tabs-navigation">
        <ul>
            <li><a data-content="HousingVitals" id="HousingVitals1" onclick="scrollDefault(1);" href="#0">Housing Vitals</a></li>
            <li><a data-content="Score" id="Score1" class="selected" onclick="scrollDefault(2);" href="#0">Rating Snapshot</a></li>
            <li><a data-content="locality" id="locality1" onclick="scrollDefault(3);" href="#0">Housing v/s Locality</a></li>
            <li><a data-content="Indicators" id="Indicators1" onclick="scrollDefault(4);" href="#0">Top Indicators</a></li>
            <li><a data-content="Compare" id="Compare1" onclick="initialize();" href="#0">Nearby Housings</a></li>  @*onclick="scrollUpMenu('near')"*@
            <li><a id="liInsights" data-content="Insights" onclick="scrollDefault(6);" href="#0">Key Insights</a></li>
            <li><a id="liDetailscore" data-content="Detailscore" onclick="scrollDefault(7);" href="#0">Detailed Rating</a></li>
            <li><a data-content="Wisometer" id="Wisometer1" onclick="scrollDefault(8);" href="#0">Wiso Meter</a></li>
        </ul>                                    
    </div>
</div>

和java脚本代码在下面给出

function scrollDefault(x)
    {   
        if(x == 1)
        {
            $('#Default').scrollLeft(0);
        }
        else if(x == 2)
        {
            $('#Default').scrollLeft(50);
        }
        else if(x == 3)
        {   
            $('#Default').scrollLeft(130);
        }
        else if(x == 4)
        {
            $('#Default').scrollLeft(220);
        }
        else if(x == 5)
        {
            $('#Default').scrollLeft(300);
        }
        else if(x == 6)
        {
            $('#Default').scrollLeft(370);
        }
        else if(x == 7)
        {
            $('#Default').scrollLeft(420);
        }
        else if(x == 8)
        {
            $('#Default').scrollLeft(500);
        }
    }

Answer 1

到目前为止，我可以从您的问题中了解到，您不仅面临媒体查询问题，还面临jQuery问题。

媒体查询请关注this link。

在这里，您可以找到有关如何使用媒体查询的非常丰富的解释。

关于您当前的编码问题，首先您可以尝试使用媒体查询CSS解决此问题。这将减少编写复杂代码的必要性。您可以尝试使用CSS解决此问题。

显然你也可以用jQuery做到这一点。但是你应该开发一下你的编码结构。你必须写if冗余if else条件。但是，如果您将值保存在关联数组中，那么通过搜索该数组可以更有效地完成这些操作。

如果您愿意这样做，请按照this link。

仅媒体屏幕向左滚动

1 个答案: