如何通过点击不同的标题，在网页同一个位置显示不同的内容？

Posted 2023-05-01

就是我通过点击一排不同内容的标题(如“小说”“音乐”“新闻”“购物”等等),然后让它们在设定的同一个位置显示，如鼠标点击“音乐”，那么方框里面显示很多个站点音乐链接，鼠标移到“新闻”点击，这是音乐版块隐藏，同一位置显示新闻的版块内容，一一同样，点击谁，就会显示谁的版块内容。希望设计高手师傅们能帮忙给个方案，请问是通过什么样的形式能够达到这种效果，烦请能给我一段代码？代码在网页中怎么用，嵌在什么位置？真的非常感谢设计高手能给以帮忙。
楼下两位回答还不太详细，最好告诉我里面的代码具体的含义，最好用个比方来解答，这样比较好了解清楚它们具体的关系，它们的控制的详细过程。

设置一个div块,比如<div id="divTitle" />
用document.getElementByID得到这个div块
点击连接时，用innerhtml修改内容
document.getElementById('divTitle').innerHTML = '现在是音乐';

另外一个例子

<script type="text/javascript">
function changeText()
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';

</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/> 参考技术A 最简单的一个例子：
<script language="JavaScript">
function show(id)
document.getElementById("div1").style.display="none"
document.getElementById("div2").style.display="none"
document.getElementById(id).style.display=""

</script>
<div id="div1" >div1</div>
<div id="div2"style="display:none">div2</div>
<input type="button" value="看div1" onclick="show('div1')">
<input type="button" value="看div2" onclick="show('div2')"> 参考技术B 你说的就是Tab面板了 这代码比较复杂 要用JavaScript和css配合才能完成 你可以用Dreamweaver cs3 这个软件里面可以帮你自动生成 不过外观需要你修改它的css代码 不知道你会不会 总之几句话说不清楚 参考技术C 你好 我是从事网站设计的 可以去网上下一些整站 网上很多 我个人比较喜欢 创力CMS 自己可以新建一个列表 也可以套用该整站里的 总的来说就是用它的程序来达到你想要的效果 用到的软件 DREAMWEAVER

如何在地图视图中显示不同的位置取决于所选的选取器？ （反应原生）

【中文标题】如何在地图视图中显示不同的位置取决于所选的选取器？ （反应原生）

【英文标题】：How to show different location in Map Views depends on selected Picker? (React Native)

【发布时间】：2018-11-01 07:10:26

【问题描述】：

每个人。我正在构建一个关于在地图视图中显示不同位置的本机应用程序，这取决于所选的选择器。

我想通过检测字符串中包含的单词来使用条件语句，我使用string-contains 库来检测字符串中的一些单词。这是我的代码示例：

export default class App extends React.Component 
renderMap()
  if(contains(this.state.name, "Branch 1"))
            return <MapView
            initialRegion=
              latitude: 53.433980,
              longitude: -2.950960,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
         else if(contains(this.state.name, "Branch 2"))
           return <MapView
            initialRegion=
              latitude: 51.491610,
              longitude: -0.135560,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        
        else if(contains(this.state.name, "Branch 3"))
           return <MapView
            initialRegion=
              latitude: 53.461220,
              longitude: -2.269540,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        
        else if(contains(this.state.name, "Branch 4"))
           return  <MapView
            initialRegion=
              latitude: 51.262290,
              longitude: -1.081610,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        

render()
const branchesPicker = this.state.branches.map((item, branch_id)=> 
      return(
            <Picker.Item
            label=item.name
            value=item.address
            key=item.branch_id/>
        )
    );
      this.renderMap();
return(
<View style=styles.container>
      <Picker
          selectedValue=this.state.name
          mode="dropdown"
          style= height: 50, justifyContent: 'center', flex:4, alignItems: 'stretch', 
          onValueChange=(item)=> this.setState(name: item)>
        branchesPicker
    </Picker>
        this.renderMap()
      </View>

当我运行此代码时，选择器工作正常，但是当我尝试更改选择器时，地图并没有像我想象的那样改变。它只显示一个静态的地图视图（但地图视图并不总是来自分支 1，有时当我重新加载它时它会显示分支 2 或 3。但关键是，它没有改变......）

fyi，this.state.name 正在显示所选选择器的分支名称。

非常感谢您的帮助！这真的意味着很多..

【参考方案1】：

假设您使用的是 react-native-maps。

初始区域用于在第一次加载地图时渲染和显示位置。当或如果您想在加载后更改位置，您可以使用 animateToRegion 或许多其他类似的methods。因此，当您想在选择器中选择某物时更改地图上的位置时，只需使用您的输入调用这些方法即可。

这里是sn-p的代码供参考。

 this.map.animateToRegion( latitude: region.latitude, longitude: region.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta , timeToChangeRegionInMilliSeconds);